Implement PWA

[bittu1040]

No description provided.

[bittu1040]

@kedarkm-dev Please add description here. As part of this task, You have already raised PR and merged also.

[kedarkm-dev]

A Progressive Web Application (PWA) is a type of application software delivered through the web, built using HTML, CSS, and JavaScript. It is intended to work on any platform that uses a standards-compliant browser.

Internally, a PWA uses service worker browser API to provide access to some native features. Also, it gives you an app-like feel. Cache storage is a really great feature that helps drastically improve page load time.

Getting Started with a PWA

Add @angular/pwa package by using this command

ng add @angular/pwa

Soon after adding pwa, few new files and coded gets added to angular project as below.

It adds different png files for different splash images for various resolutions icon-128x128.png, icon-144x144.png, icon-152x152.png, icon-192x192.png, icon-384x384.png, icon-512x512.png. Additionally, it adds ngsw-config.json and manifest.webmanifest for configuration purposes. Also, it modifies angular.json, package.json, index.html and app.module.ts. In goal planner there is no app.module.ts file so added it in app.config.ts file

Changes in index.html and package.json are pretty straight forward. Let’s take a quick look at the files changes by CLI.

ngsw-config.json

It’s a configuration file in JSON format. Mainly this file is responsible for the generation of ngsw-worker.js(serviceworker.js). You don’t have to write code for that. Just set a certain configuration and you’re done. Ultimately this ngsw-worker.js helps to caches resources/assets with a specific caching strategy. As explained before, under the hood it uses service worker API.

Configurable properties in ngsw-config.json

index — This specifies the entry point HTML path.

assetGroups — Here you can the specifies assets or resources that need to be cached and specify the caching strategy, whether it should be network first, cache first, or a combination of both.

manifest.webmanifest file

Primarily, it consists of how the PWA application will look when it opens up. Here you can set options like splash screen icon, background color, display, etc.

angular.json

Added src/manifest.webmanifest file under assets, so that it will be served with the site. That links ngswConfigPath and serviceWorker enabling the production configuration in build schematics.

app.config.ts
In app.config.ts will import the ServiceWorkerModule for registering ngsw-config.js (only for production mode).

To run the application locally.
A PWA only runs on https and localhost environment. The Angular CLI is limited because the service worker doesn’t work with the ng serve command. You have to create a build and host it separately, perhaps using http-server

To see a PWA in action, follow the below steps.

Run ng build --prod command. It will create files under dist/angular-pwa folder.
Navigate to that folder using cd dist/angular-pwa
Run http-server command (npm i -g http-server)

We can create a script to shorten this process. Open a terminal and run npm run start-pwa command. That’s it!

"start-pwa": "ng build --prod && http-server -p 8080 -c-1 dist/angular-pwa"

You can see that a PWA is running on http://localhost:8080. Now open the developer console and navigate to Application > Service Workers. You can see there is a service worker file ngsw-worker.js installed for http://localhost:8080

And to Deploy a PWA to production
Deploying a PWA application to the cloud does not involve any special process. You have to create a prod build using ng build --prod and then deploy that distribution on the cloud.

[bittu1040]

Awesome !!
Step by step clarified 👍

Thanks for sharing