Upload
vinci-rufus
View
157
Download
1
Embed Size (px)
Citation preview
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