Angular PWA
Download as PPTX, PDF0 likes915 views
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.
Angular PWA
- 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
- 13. ..and that’s a wrap @areai51