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.
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..
PWA requirements
Serve on Https
Service Worker
Web Manifest
Responsive
No redirects
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:
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!
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:
- Includes a link to add the manifest.json file.
- 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.
Firebase Deploy
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..
Does PWA support Bluetooth, camera, location etc.,?
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 -
MDN Service Workers -
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
PWA Stats -