This document provides an overview of progressive web apps with Angular, including what a PWA is, the key aspects like app shell model, instant loading, and offline support. It discusses how to sell the benefits of a PWA to stakeholders and describes the minimal viable components needed to create one using Angular CLI or Ionic, including a service worker to enable features like offline support. Examples of existing PWAs are also provided.

1. Progressive Web Apps with
Angular
Vinci Rufus
@areai51

2. App Shell
Model
Instant
Loading
Offline
Support
WTH is a Progressive Web App
60 fps
Add to Home
Screen

3. Progressive
The is the ‘Key’ Keyword

4. Web App
Is what it really is …

5. Selling PWAs (.. Your boss, client, PM..)
• It’s a replacement for your Responsive / Adaptive Web App
• Not every Native App needs to be Native.
• Chrome users on desktop & mobile get super enhanced experience.
• Offline support is not everything.
• There is nothing to lose.

6. Minimal Viable PWA
• App Shell  AppComponent
• Add to Home Screen  Manifest.json
• Full Screen  Manifest.json
• Offline Support  Service Worker

7. Manifest.json
• Home screen icon
• Full screen Mode
• App Name
• Background and foreground color

8. Service worker (lifecycle events)
Install
Activated
Idle
Terminated
Fetch / Message
Error
Register

9. Are you a PWA ?
• Lighthouse
https://developers.google.com/web/tools/lighthouse/

10. Angular CLI
npm install -g angular-cli
ng new my-pwa-app –mobile
Ionic 2
npm install -g ionic cordova
ionic start my-pwa-app --v2

11. Full-to PWA
• Push Notifications  GCM | FCM |Push API
• Deeply Integrated PWA  WebAPK
• SSR for app Shell  Universal
• Pre cache hashed bundles

12. Examples of PWA
https://github.com/hemanth/awesome-pwa#apps

13. ..and that’s a wrap
@areai51