Angular 5 中的 Service Worker

Question

I am trying to utilize angular service worker in my project. My cli and other configurations are as follows -

Angular CLI: 1.6.8
Node: 8.9.4
OS: win32 x64
Angular: 5.2.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.1
@angular/cli: 1.6.8
@angular/flex-layout: 2.0.0-beta.12
@angular/material: 5.2.1
@angular/service-worker: 1.0.0-beta.16
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.2.0
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.4.2
webpack: 3.10.0

I have created project using -service-worker flag and ngsw.config.json file is also created. My problem starts when I amtrying to register service worker.

1. When I am trying to register service worker using "ServiceWorkerModule.register()", 'register' method itself is not getting recognized and it is giving error.
2. Why I am not able to see any other class like swPush etc.

Answer 1

Service worker do not work without https.

Installation will fail on http.

Check this here for more info: https://developers.google.com/web/fundamentals/primers/service-workers/#you_need_https

Answer 2

You need to build your app with --prod flag. Otherwise, the service-worker.js and ngsw.json won't be created and they won't register.

Answer 3

you can just try the following steps:

• ng add @angular/service-worker

• ng build --prod

• npm i -g http-server

• http-server -p 8080

You can get add to homescreen options too.