Progressive Web Apps with Angular

Vinci Rufus@areai51

App Shell Model

Instant Loading

Offline Support

WTH is a Progressive Web App

60 fps Add to Home Screen

ProgressiveThe is the ‘Key’ Keyword

Web AppIs what it really is …

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.

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

Manifest.json

• Home screen icon• Full screen Mode• App Name• Background and foreground color

Service worker (lifecycle events)

Install

Activated

Idle

Terminated

Fetch / Message

Error

Register

Are you a PWA ?

• Lighthousehttps://developers.google.com/web/tools/lighthouse/

Angular CLInpm install -g angular-cling new my-pwa-app –mobile

Ionic 2npm install -g ionic cordovaionic start my-pwa-app --v2

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

Examples of PWA

https://github.com/hemanth/awesome-pwa#apps

..and that’s a wrap@areai51