Service Worker In Angular 5

Posted By : Himanshu Agarwal | 27-Dec-2017

angularjs

If you’re starting up the development web server with $ ng serve --open and check the Application tab in the Chrome Developer Tools you’ll notice that no service worker is active. The reason is that Angular CLI is not activating the servicer worker when we’re in development mode. Instead, you first have to build your application for production by using:
$ ng build --prod

The production build of the application is made available in the dist subfolder. To make the content of the dist server available via a web server you can use any static web server like HTTP-server.
The live-server project’s website can be found at https://github.com/indexzero/http-server. To install HTTP-server globally on your system just use the following command:

$ npm install HTTP-server -g

Now you can start HTTP-server right inside the dist folder:

$ HTTP-server

Service Worker Configuration
The Service Worker script which is preinstalled (ngsw-worker.js) is a generic service worker which can be configured.
Here is the content of the default Service Worker configuration file which is available in file src/ngsw-config.json

{
  "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/**"
      ]
    }
  }]
}