Service Worker on Zurich train tunnel

Angular Service Worker landed on @angular.cli 1.6

With Angular 5 version having implemented a new Service Worker customized for Angular apps and @angular/cli 1.6 building it into your Angular app, a further step towards Progressive Web Apps has been made.

Why is this important? Progressive Web Apps (or PWA) are seen for many years now as the evolution of apps, bound to replace the native mobile apps and offer the user a seamless experience (native-like) on mobile platforms. With the announcement of Service Worker API development on Webkit/Safari, the future of across the board support for Service Worker never looked better.

What Service Worker is supposed to do? As a building part of a PWA, the Service Worker is a mandatory condition, because is the part of the application that is going to run in the background to handle application requests and caching, permitting the application to function while offline, thus having the native-like behavior.

As of @angular/cli version 1.6, you can create your Angular application containing the Angular Service Worker simply by passing the --service-worker flag when you create the app using the CLI:

ng new yourappname --service-worker

If you look now into the folder/app, you notice that a new file appeared,ngsw-config which is the configuration file for the added Angular Service Worker. Inside this file, you can decide which assets will be cached and in which manner.

Then, when you build your app, on the folder/dist you will see them ngsw.jsonand,ngsw-worker.js which is the actual Angular Service Worker.

More info on how to add the Angular Service Worker to your app here.

If you want to learn more about the Service Worker, here is a good article.

Leave a Reply

Your email address will not be published. Required fields are marked *