PWA is the future!

Angular Raleigh Meetup

Hey, Am Udhay (OO-dhy)

Agenda

• Intro to PWA
• Features
• Case studies
• How it works?
• Demo
• Discussion (Q/A)

Progressive Web App

Intro to PWA

Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps.

- Mozilla Web Docs

Features

Progressive

Progressive enhancement is the core principle in PWA.

Photo by qinghill on Unsplash

Discoverable

Expose content of App to search engine for easy discover-ability.

Photo by Rajeshwar Bachu on Unsplash

Native

App-like

• PWA looks like Native app - With no address bar and other browser features.
• App icon gets added to Home screen when app is installed.
• Splash screen is displayed when the app is opened.

Photo by Balázs Kétyi on Unsplash

Responsive

Works great across all devices - Laptop, Desktop, Tablet and Mobile.

Photo by Domenico Loia on Unsplash

Network Independent

Works offline.

Photo by Jadon Kelly on Unsplash

NO

Deploy as you go..

• No complex deployment process involved (unlike App deployment).
• No App store / Play store push needed.

Photo by Alex Block on Unsplash

PWA Stats..

Browser compatibility

• Microsoft Edge - EdgeHTML 17 & above
• Safari - 13 & above
• Chrome - 40 & above
• Mozilla firefox - 44 & above

Service

Worker

(Web API)

PWA Development - Step by step

• Create Web Manifest - App name, Icon links, Description etc
• Generate Icons of different Sizes (Mobile, Tablet & Desktop)
• Create sw-config.js and add list of images and other assets to be cached.
• Register Service Worker - Triggers Install event, which download assets for offline support.
• Once Install event is complete, Service worker enters Activated stage which removes old cache assets (if exists).
• SW goes on idle state until when any background activity needs to be carried out to fetch data etc.,
• When browser is closed, SW is terminated.

Service worker - Life cycle

PWA in Angular

• Add Service Worker support to Angular project by running following command:

• Angular takes care of adding boiler plate code to handle Service worker registration, caching, manifest file creation. Thanks to Angular CLI!

PWA in Angular (Contd..)

1. Adds the @angular/service-worker package to your project.
2. Enables service worker build support in the CLI.
3. Imports and registers the service worker in the app module.
4. Updates the index.html file:
   1. Includes a link to add the manifest.json file.
   2. Adds meta tags for theme-colors 
5. Installs icon files to support the installed Progressive Web App (PWA).

6. Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.

Firebase Deploy

https://alligator.io/angular/deploying-angular-app-to-firebase/

All features of PWA work great when App is deployed to Server and served on https.

You can deploy it to Firebase using its hosting feature, which is free.

Follow the below link to learn on how to deploy Angular app in Firebase.

Demo

Click through the below link for Live demo.

Desktop..

Mobile..

Thank you!

A complete step by step guide to develop PWA in Angular -   

Live Demo - http://bit.ly/dad-joke-app

Access below links for code, guide and demo..

Code -

Reference

Service Workers - https://developers.google.com/web/fundamentals/primers/service-workers

Angular Service Worker - 

https://angular.io/guide/service-worker-intro

MDN Service Workers - 

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

PWA Stats - 

https://www.pwastats.com/