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?
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With