Progressive Web Apps auf Mobile & Desktop – Einsatzgebiete, Plattformen, aktuelle Entwicklungen

Das Anwendungsmodell der Progressive Web Apps ist nun fast sieben Jahre alt. Zeit, Bilanz zu ziehen: Wie gut schlägt es sich im Jahr 2022 auf Mobilgeräten und auf dem Desktop? Welche Funktionen können wo genutzt werden? Wofür lassen sich PWAs gut einsetzen, wofür eher nicht? Welche Plattformen können mit PWAs adressiert werden? Und tut sich da noch was im PWA-Umfeld? All diese Fragen möchte Christian Liebel, PWA-Experte bei Thinktecture, in diesem Webinar beleuchten: Mit aktuellen Beispielen aus der Praxis, neuen Entwicklungen der Plattformhersteller und fundierten Einblicken.

Transcript

1. Progressive Web Apps auf Mobile & Desktop
   Einsatzgebiete, Plattformen, aktuelle
   Entwicklungen
   Christian Liebel
   @christianliebel
   Consultant
   

   View Slide

2. Progressive Web Apps auf Mobile & Desktop
   Einsatzgebiete, Plattformen, aktuelle Entwicklungen
   

   View Slide

3. Progressive Web Apps auf Mobile & Desktop
   Einsatzgebiete, Plattformen, aktuelle Entwicklungen
   Responsive Linkable Discoverable Installable App-like
   Connectivity
   Independent
   Fresh Safe Re-engageable Progressive
   

   View Slide

4. Progressive Web Apps auf Mobile & Desktop
   Einsatzgebiete, Plattformen, aktuelle Entwicklungen
   Web App
   Manifest
   Service
   Worker
   

   View Slide

5. 2016 à 2022
   Progressive Web Apps auf Mobile & Desktop
   Einsatzgebiete, Plattformen, aktuelle Entwicklungen
   

   View Slide

6. Web Native
   Web App Gap
   Progressive Web Apps auf Mobile & Desktop
   Einsatzgebiete, Plattformen, aktuelle Entwicklungen
   Progressive Web Apps
   Web App Gap
   

   View Slide

7. ✅ Installable
   ✅ Music player
   ✅ Shares code with existing app
   Progressive Web Apps auf Mobile & Desktop
   Einsatzgebiete, Plattformen, aktuelle Entwicklungen
   Use Cases
   

   View Slide

8. Progressive Web Apps auf Mobile & Desktop
   Einsatzgebiete, Plattformen, aktuelle Entwicklungen
   Spotify
   https://open.spotify.com/
   

   View Slide

9. ✅ Installable
   ✅ Productivity app
   ✅ Shares code with existing app
   ✅ Offline capable
   ✅ Access to clipboard
   ✅ Access to local files
   Progressive Web Apps auf Mobile & Desktop
   Einsatzgebiete, Plattformen, aktuelle Entwicklungen
   Use Cases
   

   View Slide

10. Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    VS Code
    https://vscode.dev/
    

    View Slide

11. ✅ Productivity app
    ✅ Provides powerful functions
    ✅ Makes pre-existing functions available
    Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Use Cases
    

    View Slide

12. Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Photoshop
    https://creativecloud.adobe.com/cc/photoshop
    

    View Slide

13. Installability ✓
    Offline capability ✓ ✓ ✓
    Push messages ✓ (✓) ✓
    Clipboard access ✓ ✓
    File system access ✓
    Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Desktop Support
    

    View Slide

14. ✅ Installable
    ✅ Offline capable
    ✅ Productivity app
    ✅ Access to clipboard
    Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Use Cases
    

    View Slide

15. https://paint.js.org
    Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    LIVE DEMO
    

    View Slide

16. ✅ Installable
    ✅ Social network
    Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Use Cases
    

    View Slide

17. Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Twitter
    

    View Slide

18. Installability ✓ ✓ ?
    Offline capability ✓ ✓ ✓
    Push messages ✓ 2023 ✓
    Clipboard access ✓ ✓
    Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Mobile Support
    

    View Slide

19. Suitable
    – Productivity apps
    – Social networks
    – Line of business apps
    Not suitable
    – Drivers
    – Antivirus apps
    – Cloud sync clients
    Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Use Cases
    

    View Slide

20. Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Target Platforms
    + cars, smart fridges, …
    

    View Slide

21. Project Fugu
    Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Progressive Web Apps
    »Let’s bring the web
    back – API by API«
    Thomas Steiner, Google
    

    View Slide

22. Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Project Fugu
    https://fugu-tracker.web.app/
    

    View Slide

23. macOS: late 2022 with Safari 16 and macOS Ventura
    iOS/iPadOS: 2023
    Safari does not need to be open in order to receive push messages.
    Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Push on iOS
    

    View Slide

24. Starting with Safari 15 on iOS/iPadOS, the theme_color (15.0) and icons
    (15.4) are also read from the manifest.
    Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Web App Manifest Support on iOS
    

    View Slide

25. – Focus shifted from mobile to desktop
    – PWAs are very mature on desktop + Chromium-based browsers
    – Project Fugu adds missing capabilities
    – PWAs are catching up on iOS and iPadOS: push is soon available,
    additional Web App Manifest fields are supported
    – Apple implements some Fugu APIs (except hardware-related APIs)
    – No major updates by Firefox
    Progressive Web Apps auf Mobile & Desktop
    Einsatzgebiete, Plattformen, aktuelle Entwicklungen
    Summary
    

    View Slide

26. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide