PWAs with Angular

Cory Rylan

Cory Rylan

- Google Developer Expert for Angular and Web

- Front End Developer @ VMware - Clarity Design Team

- Angular Bootcamp Instructor


What is a Progressive Web App?

Not a web spec or standard

What is a Progressive Web App?

- Fast

- Integrated

- Reliable

- Engaging

PWAs are Fast

- 3G connections still prevalent

- Mobile devices (limited memory & CPU)

- 53% of users will abandon a site if it takes longer than 3 seconds to load

PWAs are Integrated

- Add to Homescreen

- Geolocation

- Camera / Mic

PWAs are reliable

- Handle offline routing

- Installation / app shell pattern

- Dynamic caching

PWAs are engaging

- Web Payment API

- Push Notifications

- Web Sockets / live data updates

- Great UX and a11y


- 150% increase in engagement for users who add its PWA to the home screen

- 97% increase in clickouts to hotel offers

Twitter Mobile PWA


PWA Lunch

Service Worker

- Proxy-ish JavaScript file

- Enables add to home screen

- Key feature for PWAs


Service Worker Lifecycle

Service Worker Development

Service Worker Downsides/Tradeoffs

- Typical tradeoffs with caching

- "Breaking" the refresh button

- Kill switch

Service Worker Support

- Chrome Team

- Generic
- Flexible

- More Features


- Easy to set up
- Better performance with Angular

- Life cycle updates

- Reactive API

ng new my-pwa

Installation Angular CLI

ng add @angular/pwa


- ng build --prod


- Lazy routing / code splitting


- Tree shakeable providers


- Service Worker caching


- Server side rendering with Angular Universal

Thank You



By Cory Rylan


  • 837