Am a seasoned Full stack java developer, have close to 11 years experience in developing software systems (both frontend and backend). Love to share my knowledge with community. Happy coding!
PWA is the future!
Angular Raleigh Meetup
Hey, Am Udhay (OO-dhy)
- Intro to PWA
- Case studies
- How it works?
- 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
Progressive enhancement is the core principle in PWA.
Expose content of App to search engine for easy discover-ability.
- 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.
Works great across all devices - Laptop, Desktop, Tablet and Mobile.
Deploy as you go..
- No complex deployment process involved (unlike App deployment).
- No App store / Play store push needed.
Serve on Https
- Microsoft Edge - EdgeHTML 17 & above
- Safari - 13 & above
- Chrome - 40 & above
- Mozilla firefox - 44 & above
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.
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.
Click through the below link for Live demo.
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..
Service Workers - https://developers.google.com/web/fundamentals/primers/service-workers
Angular Service Worker -
MDN Service Workers -
PWA Stats -
PWA is the future!
By Udhayakumar G