Progressive Web Apps mit Angular: Tipps für Fortgeschrittene

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

September 22, 2020
Tweet

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