Angular service worker

A service worker is a script which runs in the background in a browser. It’s like a proxy. A proxy works as an interface or a gateway between you and internet.It facilitates offline responsibilities. In adding service workers for a an application, so it’s part of a PWA(Progressive Web Apps).PWA is a type of application software that uses modern web capabilities such as progressive, responsiveness, connectivity pendant, app-like, fresh, Safe, discoverable, re-engageable, installable, linkable.

Why we need service workers ?

A service worker is a script to manage the caching for an application therefore, service worker run in the web browser. Adding a service worker to an Angular application is one of the steps for turning an application into a Progressive Web App (also known as a PWA). Angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs.
A service worker is used to get push notifications and load the data when application is offline.

So, what happens when using this service worker file, it caches the all data which are mentioned in the service worker file. That’s why the browser load the old values after deployment.

In creating service worker, we can define what files to be cached,

Ex:

• index.html
• favicon.ico.
• Build artifacts (JS and CSS bundles).
• Anything under assets.
• Images and fonts

Below is an example of contents in service worker json file,

Assets are resources that are part of the app version that update along with the app.

The installMode determines how these resources are initially cached. The installMode can be either of two values:

• prefetch — tells the Angular service worker to fetch every single listed resource while it’s caching the current version of the app.
• lazy — does not cache any of the resources up front.

For resources already in the cache, the updateMode determines the caching behavior when a new version of the app is discovered.

• prefetch — tells the service worker to download and cache the changed resources immediately.
• lazy — tells the service worker to not cache those resources.

Adding service worker for any angular application step by step

1. Create a new project

ng new swApp

2. Add pwa library

ng add @angular/pwa

After that you can see the couple of new files in your angular application.

1. go to src you can see a file called manifest.webmanifest — You can customize any of properties by changing the relevant values in manifest.webmanifest. This file contains about a web application in a JSON text file.

2. ngsw-config.json — it has files and data URLs the Angular service worker should cache and how it should update the cached files and data.

app.module.ts

You can see the line that AppModule tries to register the service worker script in the browser by loading the ngsw-worker.js. This js file loads in a separate HTTP request by using register method.

If you test service workers in a test environment in terms of a new instance you should add your instance name as a prefix.

ex- ‘/instanceName/ngsw-worker.js’.

abc-dev.abc.com/sw-test/login

Above URL is an example of a test environment.So in that your instance name is sw-test. Therefore you have to register your service worker in appModule like this -

ServiceWorkerModule.register('/sw-test/ngsw-worker.js', { enabled: environment.production })

After run the

ng build --prod 

You can see the generated service worker javaScript files in the file location. (/dist).

Before do the ng serve you have to set a http server in your loaclhost. Because service workers don’t run in local. So, go to your dist folder typing this command

cd dist/your app name -> cd dist/swApp

Then type in the cmd

http-server -o 

Then it opens the browser automatically, on browser go to inspect-element then select application

So you can see the service worker received time and the service worker file. The browser stores this time as a timestamp.

Update Service Worker

We need to check that a new version is available after every deployment otherwise the browser caches old application version after reloading. So we have to check new version is available periodically. We can add SwUpdate() method to check a new version after every deployment. Then if there is a new version of application is available, the browser will reload the page automatically. we can add this method in ngOnInit of AppComponent.ts.

app.component.ts

Summary

Using this service workers can be a benefit for loading an application faster and manages caching in an application. A service worker is a script that is run in the browser background. Adding a service worker to an Angular application is one of the steps for turning an application into a Progressive Web App (PWA). There are technical components of PWA. Those are HTTPS, Manifest.json and Service worker. Therefore, an service worker requires HTTPS to run in the browser.

Reference — https://angular.io/guide/service-worker-intro

Read more articles on angular service workers. Hang on for more articles 😉.