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, Cacheprobleme debuggen und den Anwender korrekt zum Abonnement von Push-Benachrichtigungen oder zum Installieren der App auffordern.

Transcript

1. Progressive Web Apps mit Angular
   Tipps für Fortgeschrittene
   Christian Liebel
   Consultant
   @christianliebel
   

   View Slide

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
   

   View Slide

3. The image part with relationship ID rId3 was not found in the file.
   The image part with relationship ID rId3 was not found in the file.
   The image part with relationship ID rId3 was not found in the file.
   Special Day “Modern Business Applications”
   Thema Sprecher Datum, Uhrzeit Raum
   Pragmatische Microservices mit .NET Core 3 –
   mehr als nur gRPC
   Christian Weyer DI, 25. Februar 2020,
   10.30 bis 11.30
   Ballsaal 2
   Web Components: native Komponenten fürs Web –
   das Ende der SPA Frameworks?
   Manuel Rauber DI, 25. Februar 2020,
   11.45 bis 12.45
   Ballsaal 2
   Progressive Web Apps – die Grundlagen Sebastian Springer DI, 25. Februar 2020,
   14.15 bis 15.15
   Ballsaal 2
   Progressive Web-Apps mit Angular:
   Tipps für Fortgeschrittene
   Christian Liebel DI, 25. Februar 2020,
   15.30 bis 16.30
   Ballsaal 2
   Blazor: SPAs im Browser mit C# und WebAssembly Christian Weyer DI, 25. Februar 2020,
   17.15 bis 18.15
   Ballsaal 2
   

   View Slide

4. Progressive Web Apps mit Angular
   Tipps für Fortgeschrittene
   

   View Slide

5. Progressive Web Apps mit Angular
   Tipps für Fortgeschrittene
   PWAs with Angular LIVE DEMO
   

   View Slide

6. ü Web App Manifest
   ü Icon
   ü Service Worker configuration
   Progressive Web Apps mit Angular
   Tipps für Fortgeschrittene
   PWAs with Angular
   

   View Slide

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)
   

   View Slide

8. Progressive Web Apps mit Angular
   Tipps für Fortgeschrittene
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Service Worker
    System
    Website
    HTML/JS
    Cache
    Storage
    Internet
    fetch HTTP
    Service
    Worker
    

    View Slide

12. Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Service Worker Debugging (DevTools)
    

    View Slide

13. Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Cache Debugging (DevTools) LIVE DEMO
    

    View Slide

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)
    

    View Slide

15. ngsw.json
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Cache Debugging
    ngsw-
    config.json
    ng build
    --prod
    ngsw.json
    

    View Slide

16. Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    NGSW Debug State
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Communicate App Updates
    V1 V2 V2
    V1 V1 V2
    Server
    Browser
    

    View Slide

20. Angular: SwUpdate
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Communicate App Updates
    

    View Slide

21. Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Communicate App Updates LIVE DEMO
    

    View Slide

22. ngsw-config.json
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Communicate App Updates
    

    View Slide

23. Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Communicate App Updates LIVE DEMO
    

    View Slide

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
    

    View Slide

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
    

    View Slide

26. Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    SwPush
    

    View Slide

27. Permissions
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Push Notifications
    

    View Slide

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
    

    View Slide

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.”
    

    View Slide

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/
    

    View Slide

31. Double Permission
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Push Notifications
    

    View Slide

32. SWR3 – Double Opt-In
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Push Notifications
    

    View Slide

33. SWR3 – Channels
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Push Notifications
    

    View Slide

34. Register for Push
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Push Notifications LIVE DEMO
    

    View Slide

35. Debugging
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Push Notifications
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

39. Address Bar
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Request Installation
    

    View Slide

40. beforeinstallprompt
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Request Installation LIVE DEMO
    

    View Slide

41. beforeinstallprompt
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Request Installation
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

47. Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Project Fugu
    Contacts
    Picker
    Wake Lock
    API
    Picture in
    picture
    Native File
    System API
    

    View Slide

48. Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Project Fugu
    https://goo.gle/fugu-api-tracker
    

    View Slide

49. Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Project Fugu LIVE DEMO
    

    View Slide

50. Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    Project Fugu
    navigator.share();
    Intent.ACTION_SEND DataTransferManager
    …
    SharingViewController
    

    View Slide

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
    

    View Slide

52. Questions?
    Progressive Web Apps mit Angular
    Tipps für Fortgeschrittene
    

    View Slide

53. Thank you for your kind attention!
    https://thinktecture.com/newsletter
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide