PWA is the future!

Angular Raleigh Meetup

@AskUdhay

Hey, Am Udhay (OO-dhy)

Agenda

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

@AskUdhay

Progressive Web App

@AskUdhay

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

@AskUdhay

Features

@AskUdhay

Progressive

Progressive enhancement is the core principle in PWA.

Photo by qinghill on Unsplash

@AskUdhay

Discoverable

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

Photo by Rajeshwar Bachu on Unsplash

@AskUdhay

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

@AskUdhay

Responsive

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

Photo by Domenico Loia on Unsplash

@AskUdhay

Network Independent

Works offline.

Photo by Jadon Kelly on Unsplash

@AskUdhay

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

@AskUdhay

PWA Stats..

@AskUdhay

PWA requirements

Serve on Https

Service Worker

Web Manifest

Responsive

No redirects

@AskUdhay

Browser compatibility

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

Service

Worker

(Web API)

@AskUdhay

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.

@AskUdhay

Service worker - Life cycle

@AskUdhay

PWA in Angular

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

ng add @angular/pwa

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

@AskUdhay

PWA in Angular (Contd..)

Adds the @angular/service-worker package to your project.
Enables service worker build support in the CLI.
Imports and registers the service worker in the app module.
Updates the index.html file:
1. Includes a link to add the manifest.json file.
2. Adds meta tags for theme-colors
Installs icon files to support the installed Progressive Web App (PWA).
Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.

@AskUdhay

Firebase Deploy

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

@AskUdhay

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

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

Click through the below link for Live demo.

@AskUdhay