Progressive Web Apps mit Angular: Tipps für Fortgeschrittene

Progressive Web Apps sind ein plattformübergreifendes Anwendungsmodell, das auf Webtechnologien basiert. Auch Googles SPA Framework Angular enthält eine PWA-Unterstützung, die schnell angeschaltet ist. Doch damit geht die Arbeit erst richtig los: Christian Liebel zeigt Ihnen, wie Sie mit Angular-App-Updates richtig kommunizieren, Cache-Probleme debuggen und den Anwender korrekt zum Abonnement von Pushbenachrichtigungen oder zum Installieren der App auffordern.

Transcript

1. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Christian Liebel Consultant @christianliebel
2. Hello, it’s me. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
3. The image part with relationship ID rId12 was not found in the file. The image part with relationship ID rId12 was not found in the file. Special Day “Modern Business Applications” Thema Sprecher Datum, Uhrzeit Ein Wegweiser durch den Dschungel der Web-API Möglichkeiten Gregor Biswanger DI, 22. September 2020, 10.30 bis 11.30 Web Components auf Steroiden mit StencilJS Manuel Rauber DI, 22. September 2020, 12.00 bis 13.00 Progressive Web Apps – die Grundlagen Sebastian Springer DI, 22. September 2020, 14.30 bis 15.30 Progressive Web Apps mit Angular: Tipps für Fortgeschrittene Christian Liebel DI, 22. September 2020, 16.00 bis 17.00 Blazor: Single Page Applications im Browser mit C# & WebAssembly Christian Weyer DI, 22. September 2020, 17.30 bis 18.30
4. Progressive Web Apps mit Angular Tipps für Fortgeschrittene
5. Progressive Web Apps mit Angular Tipps für Fortgeschrittene PWAs with Angular LIVE DEMO
6. ü Web App Manifest ü Icon ü Service Worker configuration Progressive Web Apps mit Angular Tipps für Fortgeschrittene PWAs with Angular
7. § Initial caching of static content § Caching external content § Dynamic caching § Push notifications Progressive Web Apps mit Angular Tipps für Fortgeschrittene Angular Service Worker (NGSW)
8. Progressive Web Apps mit Angular Tipps für Fortgeschrittene
9. Debugging Communicate App Updates Push Notifications Request Installation When Workbox? When NGSW? Project Fugu Progressive Web Apps mit Angular Tipps für Fortgeschrittene Agenda
10. Debugging Communicate App Updates Push Notifications Request Installation When Workbox? When NGSW? Project Fugu Progressive Web Apps mit Angular Tipps für Fortgeschrittene Agenda
11. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Service Worker System Website HTML/JS Cache Storage Internet fetch HTTP Service Worker
12. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Service Worker Debugging (DevTools)
13. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Cache Debugging (DevTools) LIVE DEMO
14. ngsw-config.json Progressive Web Apps mit Angular Tipps für Fortgeschrittene Cache Debugging { "index": "/index.html", "assetGroups": [ // … ], "dataGroups": [ // … ] } Name of index document Caches source files of a single app version (i.e., static caching) Survive app versions (i.e., for dynamic caching)
15. ngsw.json Progressive Web Apps mit Angular Tipps für Fortgeschrittene Cache Debugging ngsw- config.json ng build --prod ngsw.json
16. Progressive Web Apps mit Angular Tipps für Fortgeschrittene NGSW Debug State
17. § Developers have a full debugging experience for Service Workers in Chrome DevTools § In Angular: /ngsw/state shows the debug page of Angular’s Service Worker Progressive Web Apps mit Angular Tipps für Fortgeschrittene Takeaways
18. Debugging Communicate App Updates Push Notifications Request Installation When Workbox? When NGSW? Project Fugu Progressive Web Apps mit Angular Tipps für Fortgeschrittene Agenda
19. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Communicate App Updates V1 V2 V2 V1 V1 V2 Server Browser
20. Angular: SwUpdate Progressive Web Apps mit Angular Tipps für Fortgeschrittene Communicate App Updates
21. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Communicate App Updates LIVE DEMO
22. ngsw-config.json Progressive Web Apps mit Angular Tipps für Fortgeschrittene Communicate App Updates
23. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Communicate App Updates LIVE DEMO
24. § Inform your users when there is an update and allow them to get the update instantly § Optional: Show a changelog of what is included in the update § In Angular: Use SwUpdate Progressive Web Apps mit Angular Tipps für Fortgeschrittene Communicate App Updates
25. Debugging Communicate App Updates Push Notifications Request Installation When Workbox? When NGSW? Project Fugu Progressive Web Apps mit Angular Tipps für Fortgeschrittene Agenda
26. Progressive Web Apps mit Angular Tipps für Fortgeschrittene SwPush
27. Permissions Progressive Web Apps mit Angular Tipps für Fortgeschrittene Push Notifications
28. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Push Notifications https://dev.to/chromiumdev/yestifications-exploring-how-users-engage-with-notification-prompts-in-the-chrome-ux-report-4h7c
29. Permissions Progressive Web Apps mit Angular Tipps für Fortgeschrittene Push Notifications https://blog.chromium.org/2020/01/introducing-quieter-permission-ui-for.html “In addition, the quieter UI will be automatically enabled for users under two conditions: first, for users who typically block notification permission requests and second, on sites with very low opt in rates.”
30. Permissions Progressive Web Apps mit Angular Tipps für Fortgeschrittene Push Notifications https://blog.mozilla.org/futurereleases/2019/11/04/restricting-notification-permission-prompts-in-firefox/
31. Double Permission Progressive Web Apps mit Angular Tipps für Fortgeschrittene Push Notifications
32. SWR3 – Double Opt-In Progressive Web Apps mit Angular Tipps für Fortgeschrittene Push Notifications
33. SWR3 – Channels Progressive Web Apps mit Angular Tipps für Fortgeschrittene Push Notifications
34. Register for Push Progressive Web Apps mit Angular Tipps für Fortgeschrittene Push Notifications LIVE DEMO
35. Debugging Progressive Web Apps mit Angular Tipps für Fortgeschrittene Push Notifications
36. Takeaways § Always make use of double opt-in § Communicate the advantages of your push notifications § Optional: Allow users to subscribe to specific channels § In Angular: Use SwPush Progressive Web Apps mit Angular Tipps für Fortgeschrittene Push Notifications
37. Debugging Communicate App Updates Push Notifications Request Installation When Workbox? When NGSW? Project Fugu Progressive Web Apps mit Angular Tipps für Fortgeschrittene Agenda
38. Requirements Web App is not already installed Meets a user engagement heuristic (previously: user has interacted with domain for at least 30 seconds) Includes a Web App Manifest that has short_name or name, at least a 192px and 512px icon, a start_url and a display mode of fullscreen, standalone or minimal-ui Served over HTTPS Has a registered service worker with a fetch event handler https://developers.google.com/web/fundamentals/app-install-banners/ Progressive Web Apps mit Angular Tipps für Fortgeschrittene Request Installation
39. Address Bar Progressive Web Apps mit Angular Tipps für Fortgeschrittene Request Installation
40. beforeinstallprompt Progressive Web Apps mit Angular Tipps für Fortgeschrittene Request Installation LIVE DEMO
41. beforeinstallprompt Progressive Web Apps mit Angular Tipps für Fortgeschrittene Request Installation
42. Takeaways § Fulfill the installation requirements § Optional: Provide an install button within your own UI via beforeinstallprompt (at risk in Web App Manifest, could stay Chromium-only) § Test criteria via Lighthouse Progressive Web Apps mit Angular Tipps für Fortgeschrittene Request Installation
43. Debugging Communicate App Updates Push Notifications Request Installation When Workbox? When NGSW? Project Fugu Progressive Web Apps mit Angular Tipps für Fortgeschrittene Agenda
44. Progressive Web Apps mit Angular Tipps für Fortgeschrittene When Workbox? When NGSW? NgServiceWorker – One-size-fits-all Service Worker – Angular CLI supports Service Worker generation – Pre-defined functionality, limited customizability Custom Implementation – Individually created Service Worker – Post-process build output of an Angular app – Maximum flexibility, maximum management overhead
45. Debugging Communicate App Updates Push Notifications Request Installation When Workbox? When NGSW? Project Fugu Progressive Web Apps mit Angular Tipps für Fortgeschrittene Agenda
46. Cross-Vendor Initiative Led By… Progressive Web Apps mit Angular Tipps für Fortgeschrittene Project Fugu – A More Capable Web »Let’s bring the web back – API by API« Thomas Steiner, Google
47. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Project Fugu Contacts Picker Wake Lock API Picture in picture File System Access API
48. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Project Fugu https://goo.gle/fugu-api-tracker
49. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Project Fugu LIVE DEMO
50. Progressive Web Apps mit Angular Tipps für Fortgeschrittene Project Fugu navigator.share(); Intent.ACTION_SEND DataTransferManager … SharingViewController
51. Takeaways § Expect web applications to become more and more powerful § Keep an eye on Fugu’s Bug Tracker (e.g. by subscribing to changes of the spreadsheet) Progressive Web Apps mit Angular Tipps für Fortgeschrittene Project Fugu
52. Questions? Progressive Web Apps mit Angular Tipps für Fortgeschrittene
53. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com PWA-Cheat-Sheet