Angular 6.1.2 PWA not working

manpreet Best Answer 2 years ago

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.jsonfile 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/pwapackage, 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?

manpreet 2 years ago

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