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.

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
    christian.liebel@thinktecture.com
    

    View Slide