What's Next For Progressive Web Apps: Exklusive Einblicke in die Zukunft der Web-Apps

Progressive Web Apps (PWA) erleben einen Aufschwung: macOS und iOS/iPadOS ermöglichen nun Installation, Offline-Funktionalität und Pushbenachrichtigungen für PWAs, wie es auf anderen Plattformen schon lange der Fall ist. Adobe hat seine Web-App von Photoshop aus der Betaphase entlassen, und Google und Apple haben sich jetzt auf die PWA-Installationskriterien geeinigt.

Christian Liebel bietet Einblicke von der TPAC, der Jahreskonferenz des W3C, diskutiert die Positionen der Browserhersteller, erwartete Entwicklungen und die Zukunft von PWAs. Bleibt der Begriff "PWA"? Welche Web-Schnittstellen sind geplant? Komm vorbei und aktualisiere dein PWA-Wissen!

Transcript

1. What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps Christian Liebel @christianliebel Consultant
2. Hello, it’s me. What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps Christian Liebel X: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
3. Exklusive Einblicke in die Zukunft der Web-Apps What’s Next For Progressive Web Apps
4. Exklusive Einblicke in die Zukunft der Web-Apps What’s Next For Progressive Web Apps
5. Exklusive Einblicke in die Zukunft der Web-Apps 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 Exklusive Einblicke in die Zukunft der Web-Apps Demo Use Case
7. Exklusive Einblicke in die Zukunft der Web-Apps What’s Next For Progressive Web Apps
8. 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 Exklusive Einblicke in die Zukunft der Web-Apps Demo Use Case
9. What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps Target Platforms PROGRESSIVE WEB APPS + cars, smart fridges, …
10. What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps Web App Manifest Service Worker
11. 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 Exklusive Einblicke in die Zukunft der Web-Apps PWA
12. 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 Exklusive Einblicke in die Zukunft der Web-Apps PWA Names Icons Display Mode Shortcuts Start URL Theme color (status bar/window bar)
13. Manifest Display Modes What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps PWA browser minimal-ui standalone fullscreen
14. 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 Exklusive Einblicke in die Zukunft der Web-Apps PWA
15. Now installable from Safari What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps PWA
16. Manifest Icon Purposes (any) any context (e.g. app icon) monochrome different color requirements (at risk) maskable user agent masks icon as required What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps PWA Safe Zone Windows iOS Android
17. Manifest Shortcuts What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps PWA Secondary entrypoints for your application (e.g., home screen quick actions, jump lists, …) Static definition in Web App Manifest Supported by Chromium- based browsers for Android, macOS and Windows + Safari on macOS
18. 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 Exklusive Einblicke in die Zukunft der Web-Apps PWA https://web.dev/install-criteria/
19. 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 Exklusive Einblicke in die Zukunft der Web-Apps PWA https://web.dev/install-criteria/
20. 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 Exklusive Einblicke in die Zukunft der Web-Apps PWA
21. Service Worker What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps PWA Service Worker Internet Website HTML/JS Cache fetch
22. 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 Exklusive Einblicke in die Zukunft der Web-Apps PWA
23. What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps
24. Project Fugu What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps Capabilities »Let’s bring the web back – API by API« Thomas Steiner, Google
25. What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps The Future of Powerful APIs on the Web Platform
26. What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps Web Install API
27. 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 Exklusive Einblicke in die Zukunft der Web-Apps Outlook
28. Isolated Web Apps What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps Outlook JS HTML CSS Enterprise Deploy App Store MSI, APK, … Signed Web Bundle Platform- specific
29. Spotify What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps Use Cases https://open.spotify.com/
30. VS Code What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps Use Cases https://vscode.dev/
31. Photoshop What’s Next For Progressive Web Apps Exklusive Einblicke in die Zukunft der Web-Apps Use Cases https://creativecloud.adobe.com/cc/photoshop
32. 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 Exklusive Einblicke in die Zukunft der Web-Apps Summary
33. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com