Creating Progressive Web Apps with Angular — Part 1

What is a PWA?

  1. Reliable — They should load instantly even if the network conditions are not so good or if there’s no network at all.
  2. Fast — They should be highly interactive and provide fast user experience. I.e. smooth scrolling and animations etc.
  3. Engaging — They should be engaging so the user gets an immersive experience and stays connected with the app.

Running the application (non-pwa)

Non-pwa app served using `ng-serve`
Over all stats of non-pwa-app
The load time on an average low connection is > 11 seconds

Making the app reliable & faster

npm install --save @angular/service-worker @angular/platform-server ng-pwa-tools
yarn add @angular/service-worker @angular/platform-server ng-pwa-tools --save
ng set apps.0.serviceWorker=true
#!/bin/bash
PATH=$PATH:$(npm bin)
set -x
# Production build
ng build --prod
# Serve
cd dist
http-server
./node_modules/.bin/ngu-sw-manifest --module src/app/app.module.ts
#!/bin/bash
PATH=$PATH:$(npm bin)
set -x
# Production build
ng build --prod
# merge ngsw-manifest and copy to dist
./node_modules/.bin/ngu-sw-manifest --module src/app/app.module.ts \
--out dist/ngsw-manifest.json
# Serve
cd dist
http-server
Contents of auto-generated ngsw-manifest.json
Assets being fetched from the service worker now
Contents of our custom ngsw-manifest.json
Books Api Call fetching books list from the service worker
Books Api Call fetching book details from the service worker
Performance gain after implementing service worker
First page view time has decreased but is still 11.3s

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store