Getting a Service Worker working with Angular

My co-worker, Aaron Carlson , posted this on Teams and gave me permission to share what he wrote.

I was able to successfully create an Angular 5 app with Service Worker.  It was pretty simple.  The trick seems to be that you need to serve the application from the dist folder using “http-server” instead of using “ng serve”.  This doesn’t hook up the browserLink functionality but the application will still work even when you stop the http-server.  There must be a way to have the service worker running separately from the application so that you can develop the app with the BrowserLink, but I haven’t been able to figure that out yet.

1. Update to the latest Angular CLI:  npm install -g @angular/cli@latest
2. create your local project folder and navigate to it in Terminal
3. create project:  ng new AppName --service-worker
4. when that finishes, open the project folder in VS Code
5. run: ng build --prod
6. this should create the “dist” folder… navigate into the dist folder
7. install “http-server”:  npm install http-server -g
8. then run this when in the “dist” folder: http-server
   1. it will startup and show where to browse to it.
9. open http://localhost:8080 in your browser
10. in dev tools, open the “Application” tab and you should see the service worker.

The information was found here .

We’re very interested in PWAs and have been learning a lot, when we can find the time. We think this a great set of technologies for building web applications.

For adding the service-worker, I followed this guide

Checkout my (Kevin) list of PWA links .