Angular 6.1.2 PWA 不工作

Question

I tried all the solutions on the internet on how to add PWA to an Angular project, but still in Chrome Dev Tools, there are no service worker registered.

I did run ng add @angular/pwa , with ng build --prod and http-server -o and still no service worker registered. It also does not add a @angular/service-worker package and also no Manifest.json file like it should as indicated all over the internet.

I also tried creating a new project with PWA pre-installed with ng new myProject --service-worker , also not working.

I even tried registering the service working like below:

if ( 'serviceWorker' in navigator ) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js'); });

A side note: When I run ng add @angular/pwa I get a message "Path '/ngsw-config.json' already exist", so I found out that file is under @schematics package. The script only adds a @angular/pwa package, which does not corrolate with the Angular PWA docs.

---

Here is my environment :

Angular 6.1.2
Angular CLI: 6.1.3
Node 8.11.3
NPM  5.6.0

---

What do I need to do to get a plain PWA Angular project?

Answer 1

It is the new version of @angular/pwa package that has a few bugs. So running ng add @angular/pwa@0.6.8 worked perfectly for me.

To test the service worker locally: If you have Firebase added to your project (hosting), you can run ng build --prod and then firebase serve . When you don't have Firebase, you can run ng build --prod , cd into the dist folder (depending on your config) and then run http-server -o . If you don't have http-server module, install it by running npm i -g http-server

Answer 2

Try using the Angular Console: https://angularconsole.com/

It abstracts away many of the need to know logic that the cli has.

It's in beta but it should help you create the base for your PWA. Give it a try it's build from the Nrwl Team that also builds Nx which is an enhancement to the angular/cli using schematics

Answer 3

I had the same issue. The problem was than this command: ng add @angular/pwa

didn't add module @angular/pwa to package.json dependencies.

I decided it so.

First I run ng add @angular/pwa Then I did: npm install @angular/pwa

And it all works!