Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 6.1.2 PWA not working

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?

like image 796
deanwilliammills Avatar asked Aug 15 '18 22:08

deanwilliammills


People also ask

Can Angular be used for PWA?

The two key things you need to add to your web app to make it a PWA are a service worker and a web manifest. Doing this using Angular is as easy as adding the “ng add angular pwa” command to your existing Angular application.

Can I use service worker without PWA?

Service worker installation happens silently, without requiring user permission, even if the user doesn't install the PWA. The Service Worker API is even available on platforms that do not support PWA installation, such as Safari and Firefox on desktop devices.


1 Answers

It is the new version of @angular/pwa package that has a few bugs. So running ng add @angular/[email protected] 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

like image 128
deanwilliammills Avatar answered Oct 17 '22 17:10

deanwilliammills