Progressive Web App using Angular 5

Angular 5 released the support of the service worker by which we can achieve the Progressing Web Application(PWA) development in Angular.

To accomplish the PWA we have the checklist to follow. This checklist ensures the different parameters that one web application should have to be called a PWA.

Service Worker

There are two ways to configure the service worker to your project

Generate new project with service worker.

While generating the project from the Angular CLI you can add the flag

ng new my-project --service-worker

Adding a service worker to an existing app

Add package @angular/service-worker to existed project

yarn add @angular/service-worker

Then enable the service worker in existed angular cli

ng set apps.0.serviceWorker=true

Import service worker module to app.module.ts

import { ServiceWorkerModule } from '@angular/service-worker'; import { environment } from '../environments/environment';
......
  imports: [     
    BrowserModule,     
    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})   
  ],
....

Create configuration file for the angular like this. In src directory.

{
 "index": "/index.html",
 "appData": {
  "test": true
 },
 "assetGroups": [{
  "name": "appshell",
  "resources": {
   "files": [
    "/assets/**/*",
    "!/ngsw-worker.js"
   ],
   "versionedFiles": [
    "/**/*.html",
    "/**/*.js",
    "/**/*.css"
   ],
   "urls": [
    "https://fonts.googleapis.com/css?family=Material+Icons",
   ]
  }
 }],
 "dataGroups": [{
  "name": "api-freshness",
  "urls": [
   "/timeline"
  ],
  "cacheConfig": {
   "maxSize": 100,
   "maxAge": "3d",
   "timeout": "1m",
   "strategy": "freshness"
  }
 },
 {
  "name": "api-performance",
  "urls": [
   "/favorites"
  ],
  "cacheConfig": {
   "maxSize": 100,
   "maxAge": "3d",
   "timeout": "1m",
   "strategy": "performance"
  }
 }]
}

Detail explanation to the service worker configuration is here

Now just build the project with production like ng build --prod

Serve this build wherever you want either local or on server.

On this point we added the service worker which will add the caching to your website which means your website will work without any connection.

Manifest File

Manifest file isjson file that offers some additional features to developer like Add to home screen, icons, splash screen to make it feels like mobile app.

Here is an basic example of themanifest.json

{
  "short_name": "App",
  "name": "App",
  "icons": [
   {
    "src": "/assets/images/icons/apple-touch-icon.png",
    "rel": "apple-touch-ico",
    "sizes": "180x180",
    "type": "image/png"
   },
   {
    "src": "/assets/images/icons/favicon-32x32.png",
    "rel": "icon",
    "sizes": "32x32",
    "type": "image/png"
   },
  ],
  "background_color": "#ffffff",
  "theme_color": "#3f51b5",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait"
}

Details explanations are here

To generate the manifest json and icons there are some online generators like

App Menifest Generator

Web App Manifest Generator

To achieve complete score in google lighthouse we need to follow some more steps instructed by google community. To create the progressive web app the created the checklist by considering all the best possible practices.

The entire checklist is here