Building a Progressive Web Application with Angular

6 min readFeb 7, 2021

What is a Progressive Web Application?

Before starting PWA let talk about what is a web app?
A web app is something which runs on browsers and need your internet connection to get responses from servers.

And now what is a mobile app? It’s something which runs even when you don’t have internet connection and does not show a page like 404 similar to web apps when offline.

So what if there is a feature which lets you create a web app and at the same time a mobile app as well ?

Simply speaking, a PWA is best of both web app and a mobile app.

Building instant loading offline progressive web application.

Many time we have seen we are lot dependent on networks to at least run our application. Let say you have a very important application presentation and the network level while giving presentation is fluctuating because of which you are losing connections and cannot showcase your application.

For example: Your web app has a single page on which it shows a list of upcoming movies name from an API :

Let’s say:

‘https://www.getmoviesnames.com/latestMovies’.

Now when online, there will be no issue in hitting this API. It will get the result and display list of movies on browser. And when offline, our API will not hit and only some part of HTML/CSS will be rendered (as its not dependent on network).

That’s where Progressive web application comes to rescue.

Now instead of network controlling you, here you will control the network.

What if we can cache this API’s response every time we are online and deliver it to the user when it is offline ?

With this thing, our user will always get the response of API.

We can achieve this with a concept used in PWA: SERVICE WORKERS.

Service workers are middleware between your application and network. It gets requests from app and send it to server and then receive response from server and deliver to your web app. It is a simple JavaScript code that runs at the background of your application and does not block your current thread.

Let’s begin with creating PWA with angular application.

We will not learn a new thing for creating a web app. It just upgrading your application in order to get benefits of new features.

What will be covered:

· Creating a PWA

· Caching an API response

Let’s get started building application from scratch

Create an angular project

ng new Angular-PWA
cd Angular-pwa

Now create a service file to add http call to hit some API

ng g service data

Now I have to check how my things will work when application is deployed on server. So just create a dummy server on your local by installing it first from below command.

npm install –g angular-http-server

Let’s see our application in action

Run:
ng build –prod

Go to dist -> Angular-pwa and run “angular-http-server -o”.

Navigate on browser to localhost:8080. Your application will run with front page displayed.

Now go to developer tools -> Application tab -> Navigate to Service workers .

Your service worker will be blank because it’s not a PWA yet.

Now -> check “offline”.

This will show how your application will behave when offline.

At current stage you will get 404. Because till now we haven’t cached anything.

Let’s start Caching thing by adding PWA to our project

Go to your root folder of project.

ng add @angular/pwa

This will create your angular application into a Progressive web application and will create new files and update some old ones too.

The files that you will get by above command will be:

Manifest.json -> This will contains information what will be the information you want to get displayed when using this web app on your smartphone. It contains what will be the app name when you will add it to your smartphone, what will be the icon (for all resolutions), what will be the theme color.

Ngsw.config.json -> This is the heart of PWA. This is the place where we will be caching our API’s

Just create your build again so that your new changes comes in dist folder.

Now again try to run your http-server from dist folder.

Open browser.

Go to developer tools and navigate to Application -> Service workers. You will see a service worker “ngsw-worker.js” is now a part of this application.

Now check “Offline” and your application will work just like online. Because with the initial setup of PWA, it has cached all the data that was needed for our basic application.

To see “ngsw-worker.js” file, just go to your dist folder -> Angular-pwa and it will be there. Open it. There will be a huge code dealing with how to cache things.

But the hurdle we will get across is that, service worker will not take changes to your application on its own. On first load it has cached things and for rest of its life, it will deliver the same cached thing.

To check this, change something in your application. Build it again and run your server. It will deliver you the same old code. Because yet, we have not tell service worker to update itself whenever there is an update to app.

How to update Service Worker?

SwUpdate is something which service worker library provide you to update your service workers. It check if SW needs a update, if yes, the update SW.

Go to your app component.

To do that refer below code:

· Here first we have used a Boolean to tell user that an update is available. So manually click refresh.

· Second, we have used activateUpdate() method to allow automatic refresh whenever there is an update available or when we are online it will automatically refresh itself to render new changes.

Let’s Proceed to caching an API

Add HttpClientModule and your service in app.module.

In your service, create a method and call API:

In your component, call this service method by creating an instance in constructor and store data in a variable and display “jokes” in your html file.