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

What’s Next For Progressive Web Apps

What’s Next For Progressive Web Apps

Bei den Progressive Web Apps (PWA) geht es derzeit ordentlich rund: Mit macOS Sonoma und iOS/iPadOS 16 werden PWAs jetzt auch auf diesen Betriebssystemen installierbar, offlinefähig und können Pushbenachrichtigungen empfangen, wie auf allen anderen Plattformen auch. Adobe hat seine Web-App von Photoshop aus dem Beta-Stadium entlassen. Und Google und Apple haben sich auf die Kriterien geeinigt, die es braucht, um Web-Apps auf dem Gerät des Anwenders installiert werden können.

Christian Liebel von Thinktecture nimmt euch mit auf eine spannende Reise durch die neuesten Entwicklungen und Trends im Bereich leistungsfähiger Webanwendungen. Mit im Gepäck sind exklusive Einblicke von der TPAC, der Jahreskonferenz des W3C: Wie positionieren sich die Browserhersteller zum Anwendungsmodell? Was erwartet das W3C von den Browserherstellern? Welche Web-Schnittstellen sind als nächstes geplant?

Seid dabei und bringt euer PWA-Wissen auf den neuesten Stand.

Christian Liebel
PRO

November 18, 2023
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. What’s Next For Progressive Web Apps
    Christian Liebel
    @christianliebel
    Consultant

    View Slide

  2. Hello, it’s me.
    What’s Next For Progressive Web Apps
    Christian Liebel
    X:
    @christianliebel
    Email:
    christian.liebel
    @thinktecture.com
    Angular & PWA
    Slides:
    thinktecture.com
    /christian-liebel

    View Slide

  3. What’s Next For Progressive Web Apps

    View Slide

  4. What’s Next For Progressive Web Apps

    View Slide

  5. What’s Next For Progressive Web Apps
    Responsive Linkable Discoverable Installable App-like
    Connectivity
    Independent
    Fresh Safe Re-engageable Progressive

    View Slide

  6. What’s Next For Progressive Web Apps

    View Slide

  7. https://paint.js.org
    – Productivity app
    – Draw images
    – Lots of actions & tools
    – Installable
    – Read/save files
    – Copy/paste images
    from/to clipboard
    – Share files to other apps
    – Register for file extensions
    What’s Next For Progressive Web Apps
    Demo Use Case

    View Slide

  8. What’s Next For Progressive Web Apps
    Web App
    Manifest
    Service
    Worker

    View Slide

  9. Web App Manifest
    Distinguishes Web Apps from
    Websites
    JSON-based file containing
    metadata for apps only
    Apps can be identified by search
    engines, app store providers, etc.
    What’s Next For Progressive Web Apps
    PWA

    View Slide

  10. manifest.webmanifest
    {
    "short_name": "Paint",
    "name": "Paint Workshop",
    "theme_color": "white",
    "icons": [{
    "src": "icon.png",
    "sizes": "512x512"
    }],
    "start_url": "/index.html",
    "display": "standalone",
    "shortcuts": [/* … */]
    }
    What’s Next For Progressive Web Apps
    PWA
    Names
    Icons
    Display Mode
    Shortcuts
    Start URL
    Theme color (status bar/window bar)

    View Slide

  11. Manifest Display Modes
    What’s Next For Progressive Web Apps
    PWA
    browser minimal-ui standalone fullscreen

    View Slide

  12. Now installable from Safari
    https://blog.tomayac.com/2023/06/07/web-apps-on-macos-sonoma-14-beta/
    What’s Next For Progressive Web Apps
    PWA

    View Slide

  13. Now installable from Safari
    What’s Next For Progressive Web Apps
    PWA

    View Slide

  14. Web App Manifest – Chrome Install Criteria
    1. Web App is not already installed
    2. Meets a user engagement heuristic (user has interacted and clicked
    with origin for at least 30 seconds)
    3. 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
    4. Served over HTTPS
    5. A service worker is no longer required!
    What’s Next For Progressive Web Apps
    PWA
    https://web.dev/install-criteria/

    View Slide

  15. Web App Manifest – Chrome Install Criteria
    1. Web App is not already installed
    2. Meets a user engagement heuristic (user has interacted and clicked
    with origin for at least 30 seconds)
    3. 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
    4. Served over HTTPS
    5. A service worker is no longer required!
    What’s Next For Progressive Web Apps
    PWA
    https://web.dev/install-criteria/

    View Slide

  16. Service Worker
    JavaScript executed in an own
    thread, registered by the website
    Acts as a controller, proxy, or
    interceptor
    Has a cache to store responses (for
    offline availability and performance)
    Can wake up even when the website
    is closed and perform background
    tasks (e.g., push notifications or sync)
    What’s Next For Progressive Web Apps
    PWA

    View Slide

  17. Push Notifications
    Just as native apps, PWAs can
    receive push notifications
    Combination of two technologies:
    Web Notifications and Push API
    Supported by Chrome, Edge,
    Firefox, Safari
    What’s Next For Progressive Web Apps
    PWA

    View Slide

  18. What’s Next For Progressive Web Apps

    View Slide

  19. Project Fugu
    What’s Next For Progressive Web Apps
    Capabilities
    »Let’s bring the web
    back – API by API«
    Thomas Steiner, Google

    View Slide

  20. What’s Next For Progressive Web Apps
    The Future of Powerful APIs on the Web Platform

    View Slide

  21. What’s Next For Progressive Web Apps
    Capabilities
    Contacts
    Picker
    Screen Wake
    Lock API
    File System
    Access API
    Shape
    Detection API

    View Slide

  22. What’s Next For Progressive Web Apps
    Capabilities
    https://goo.gle/fugu-api-tracker

    View Slide

  23. What’s Next For Progressive Web Apps
    Web Printing API

    View Slide

  24. What’s Next For Progressive Web Apps
    Web Install API

    View Slide

  25. Isolated Web Apps
    – Packaged and signed for stronger security
    – Deployed through app stores, platform-
    specific bundles or installers
    – These additional trust anchors enable
    even more powerful APIs (e.g., Direct
    Sockets API) for IWAs
    – Still web-based, cross-platform and using
    open standards
    – But without the bloat of Electron
    What’s Next For Progressive Web Apps
    Outlook

    View Slide

  26. Spotify
    What’s Next For Progressive Web Apps
    Use Cases
    https://open.spotify.com/

    View Slide

  27. VS Code
    What’s Next For Progressive Web Apps
    Use Cases
    https://vscode.dev/

    View Slide

  28. Photoshop
    What’s Next For Progressive Web Apps
    Use Cases
    https://creativecloud.adobe.com/cc/photoshop

    View Slide

  29. Progressive Web Apps are now installable, offline-capable and able to
    receive push notifications on all operating systems
    If needed, you can still wrap your application in a platform-specific
    package à your investment in web apps always pays off!
    Let’s make the web a more capable platform!
    What’s Next For Progressive Web Apps
    Summary

    View Slide

  30. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    [email protected]

    View Slide