To add a SW to a new app we use

ng new my-project --service-worker

which adds the service-worker package along with setting up the necessary files to support service workers

To add SW to an existing app

  1. Add the service worker package.
  2. Enable service worker build support in the CLI.
  3. Import and register the service worker.
  4. Create the service worker configuration file, which specifies the caching behaviors and other settings.
  5. Build the project.

Step 1: Add the service worker package
Add the package @angular/service-worker:

yarn add @angular/service-worker

or

npm installĀ @angular/service-worker –save

Step 2: Enable service worker build support in the CLI

To enable the Angular service worker, the CLI must generate an Angular service worker manifest at build time. To cause the CLI to generate the manifest for an existing project, set the serviceWorker flag to true in the project’s .angular-cli.json file as shown here:

ng set apps.0.serviceWorker=true

Step 3: Import and register the service worker

To import and register the Angular service worker:

At the top of the root module, src/app/app.module.ts, import ServiceWorkerModule and environment.

 

[su_box title=”src/app/app.module.ts” style=”default” box_color=”#333333″ title_color=”#FFFFFF” radius=”3″ class=””]
import { ServiceWorkerModule } from ‘@angular/service-worker’;
import { environment } from ‘../environments/environment’;
[/su_box]

Add ServiceWorkerModule to the @NgModule imports array. Use the register() helper to take care of registering the service worker, taking care to disable the service worker when not running in production mode.

[su_box title=”src/app/app.module.ts” style=”default” box_color=”#333333″ title_color=”#FFFFFF” radius=”3″ class=””]

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ServiceWorkerModule.register(‘/ngsw-worker.js’, {enabled: environment.production})
],
providers: [
CheckForUpdateService,
LogUpdateService,
PromptUpdateService,
],
bootstrap: [AppComponent]
})
export class AppModule { }
[/su_box]

The file ngsw-worker.js is the name of the prebuilt service worker script, which the CLI copies into dist/ to deploy along with your server.

Step 4: Create the configuration file, ngsw-config.json

The Angular CLI needs a service worker configuration file, called ngsw-config.json. The configuration file controls how the service worker caches files and data resources.

You can begin with the boilerplate version from the CLI, which configures sensible defaults for most applications.

Alternately, save the following as src/ngsw-config.json:

[su_box title=”src/ngsw-config.json” style=”default” box_color=”#333333″ title_color=”#FFFFFF” radius=”3″ class=””]

{
“index”: “/index.html”,
“assetGroups”: [{
“name”: “app”,
“installMode”: “prefetch”,
“resources”: {
“files”: [
“/favicon.ico”,
“/index.html”
],
“versionedFiles”: [
“/*.bundle.css”,
“/*.bundle.js”,
“/*.chunk.js”
]
}
}, {
“name”: “assets”,
“installMode”: “lazy”,
“updateMode”: “prefetch”,
“resources”: {
“files”: [
“/assets/**”
]
}
}]
}

[/su_box]

Step 5: Build the project
Finally, build the project:

ng build –prod

The CLI project is now set up to use the Angular service worker.