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
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
3. What’s Next For Progressive Web Apps
4. What’s Next For Progressive Web Apps
5. What’s Next For Progressive Web Apps Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
6. What’s Next For Progressive Web Apps
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
8. What’s Next For Progressive Web Apps Web App Manifest Service Worker
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
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)
11. Manifest Display Modes What’s Next For Progressive Web Apps PWA browser minimal-ui standalone fullscreen
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
13. Now installable from Safari What’s Next For Progressive Web Apps PWA
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/
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/
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
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
18. What’s Next For Progressive Web Apps
19. Project Fugu What’s Next For Progressive Web Apps Capabilities »Let’s bring the web back – API by API« Thomas Steiner, Google
20. What’s Next For Progressive Web Apps The Future of Powerful APIs on the Web Platform
21. What’s Next For Progressive Web Apps Capabilities Contacts Picker Screen Wake Lock API File System Access API Shape Detection API
22. What’s Next For Progressive Web Apps Capabilities https://goo.gle/fugu-api-tracker
23. What’s Next For Progressive Web Apps Web Printing API
24. What’s Next For Progressive Web Apps Web Install API
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
26. Spotify What’s Next For Progressive Web Apps Use Cases https://open.spotify.com/
27. VS Code What’s Next For Progressive Web Apps Use Cases https://vscode.dev/
28. Photoshop What’s Next For Progressive Web Apps Use Cases https://creativecloud.adobe.com/cc/photoshop
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
30. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com