Making Angular Application As Progressive Web App

What is PWA?

Progressive Web Applications(WPA) works as a native mobile application. It gives a better user experience and displays the page even when the user is offline. It will combine features of the mobile applications with browser desktop app. The native mobile application provides push notifications and loads faster in mobile devices. PWA makes use of caching techniques and strategies to show web pages even when the network is not good. If we have visited an application prior, we will be able to see the pages fast even on the slow network.
  • Fast loading of pages even on a slow network.
  • It makes use of caching techniques and a service web worker to cache things loaded in prior.
  • User engagement and interaction with the application will not get disrupted on slow networks.
  • Amazing user experience and faster loading of pages will always have more conversion for new users.

Service Worker

A service worker is a script that runs in the background of the application. This worker is the main concept behind WPA. It enables caching techniques, pushes notifications and gives the user access to web pages even on slow networks. It loads HTML, CSS, and Javascript of visited pages using caching. When a user is offline, this service worker intercepts network requests and does its job of caching information. 

Adding PWA To Angular Project

We will go to our project folder and write the below command:

ng add @angular/pwa

The above command will add a @angular/service-worker package to the project.
  • We will have the ServiceWorkerModule in our app.module.ts file shown as below:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  • In our index.html file, we will have a link to the manifest file. It also adds the meta tag defining theme-color.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyFirstPwa</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#1976d2">
</head>
<body>
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>


  • We will have a new file called ngsw-config.json. This file specifies which files that need to pre-fetched. This file will have the last attribute as assetGroups. We will load certain files using the prefetch install strategy. This ensures that some files are always cached even the user is offline.
  • We will load the assets as well. We are using prefetch and lazy strategy to load the assets. 

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Testing Angular PWA

To check whether our service worker is registered or not, we have to serve the production build using Node Static Server.

We will run the following command

ng build --prod

Now we will install Node Static Server to serve the static resources. We will install this package using the following command:

 npm -g install static-server

Now we will go to the dist/buildFolderName and write the command as

static-server

Now we will go our browser at http://localhost:9080/ and open the developer tools. Check the application tab to see the service-worker. It ensures that we have registered the service worker successfully.



Now we will load the application the first time. After that, we will go offline mode and load the application again. Open the Network Tab on the developer tools. We will see that all the requests and assets are getting loaded from the Service Worker.


We have successfully made our Angular application a Progressive Web App by following the above steps. 

Comments