Add a service worker to the Angular app

Author: agmo

angular/angular.json

@@ -25,7 +25,8 @@
  "aot": true,
  "assets": [
  "src/favicon.ico",
- "src/assets"
+ "src/assets",
+ "src/manifest.webmanifest"
  ],
  "styles": [
  "src/styles.scss"
@@ -59,7 +60,9 @@
  "maximumWarning": "6kb",
  "maximumError": "10kb"
  }
- ]
+ ],
+ "serviceWorker": true,
+ "ngswConfigPath": "ngsw-config.json"
  }
  }
  },
@@ -89,7 +92,8 @@
  "karmaConfig": "karma.conf.js",
  "assets": [
  "src/favicon.ico",
- "src/assets"
+ "src/assets",
+ "src/manifest.webmanifest"
  ],
  "styles": [
  "src/styles.scss"

angular/ngsw-config.json

@@ -0,0 +1,29 @@
+{
+ "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+ "index": "/index.html",
+ "assetGroups": [
+ {
+ "name": "app",
+ "installMode": "prefetch",
+ "resources": {
+ "files": [
+ "/favicon.ico",
+ "/index.html",
+ "/manifest.webmanifest",
+ "/*.css",
+ "/*.js"
+ ]
+ }
+ }, {
+ "name": "assets",
+ "installMode": "lazy",
+ "updateMode": "prefetch",
+ "resources": {
+ "files": [
+ "/assets/**",
+ "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+ ]
+ }
+ }
+ ]
+}

angular/package-lock.json

@@ -19,6 +19,7 @@
  "@angular/platform-browser": "~10.0.0",
  "@angular/platform-browser-dynamic": "~10.0.0",
  "@angular/router": "~10.0.0",
+ "@angular/service-worker": "~10.0.0",
  "rxjs": "~6.5.5",
  "tslib": "^2.0.0",
  "zone.js": "~0.10.3"

angular/package.json

@@ -3,14 +3,17 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 
 @NgModule({
  declarations: [
  AppComponent
  ],
  imports: [
  BrowserModule,
- AppRoutingModule
+ AppRoutingModule,
+ ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [],
  bootstrap: [AppComponent]