$30 off During Our Annual Pro Sale. View Details »

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

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.

Christian Liebel
PRO

August 31, 2022
Tweet

More Decks by Christian Liebel

Other Decks in Programming

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
    [email protected]

    View Slide