Getting a Service Worker working with Angular

January 5, 2018    JavaScript Development Angular

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/[email protected]
  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.

Service Worker in the dev tools application tab

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.



comments powered by Disqus

Please consider using Brave and adding me to your payment ledger. Then you won't have to see ads!

Support me and download Brave!

Use Brave