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

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

What’s Next For Progressive Web Apps

What’s Next For Progressive Web Apps

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

What’s Next For Progressive Web Apps

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

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

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

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)

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

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

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

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/

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/

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

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

What’s Next For Progressive Web Apps

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

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

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

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

What’s Next For Progressive Web Apps Web Printing API

What’s Next For Progressive Web Apps Web Install API

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

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

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

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

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

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