Angular Service Worker!

Hi everyone! Are you familiar with the word service worker?

Our web application is a downloadable and installable, quite like a native mobile app with the Angular Service Worker and the Angular CLI built-in PWA support.

Do you know PWA?

Progressive Web App (also known as a PWA) which name was given to a set of new W3C(World Wide Web Consortium) standards. This is an app built from web technologies, like HTML, CSS, and JavaScript, but with the look and feel of a native app.

Let’s see how we work with the service worker

First, we need to create an angular app.

ng new pwa-app

We can update an existing app with this command

ng add @angular/pwa --project <name of project as in angular.json>

In the above example, our existing app updating will be,

ng add @angular/pwa --project pwa-app

We can see that the @angular/service-worker package was added to package.json.

And also, there is a new serviceWorker flag set to true in the CLI configuration file angular.json

Now, our app.module.ts file will look like the below screen,

we can see ServiceWorkerModule added in our root module file.

we will be going to change our app.component.html file like in the below screen.

Let’s do production build in our application

ng build --prod

Now we will have our application build available inside the dist folder.

we can see lots of files generated in the dist folder.

ngsw stands for Angular Service Worker

For starting our app in Production Mode we need a small server. we are going to use http-server

First, we have to install it.

npm install -g http-server

Let’s start the server

cd dist/angular-pwa
http-server -c-1 .

The -c-1 option will disable server caching.

the server will normally be running on port 8080, for running the app

http-server -c-1 --proxy http://localhost:8080 .

Go and check http://localhost:8080 this link, and see what we have run using the Chrome Dev Tools

so, we have installed service worker with source file ngsw-worker.js

let’s see what is happening when we stop the server.

Woah! nothing has changed! It’s same as before.

Let’s try to add a download feature to the application

go to manifest.json file and change it as shown in the below code

make sure <link rel= "manifest" href="manifest.json">added into the index.html file.

Configure angular.json file like this,

See,our Chrome dev tools are now looking like this.

Now, yes You have completed your PWA website using Angular Service Worker.

How can we check our website is a PWA website? How can we make sure about that?

yes! we have a tool called Lighthouse which is existing as a google extension, so we can easily use that.

Now, once we click lighthouse tool we can get a button called generate report.

Once generate the report after some time, it will loaded a report below like this.

Yes, We have done our PWA Web App Successfully.

Thank you, Everyone.

References : Angular Service Worker