Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What's Next For Progressive Web Apps: Exklusive...

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!

Christian Liebel

May 08, 2024
Tweet

More Decks by Christian Liebel

Other Decks in Programming

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 Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
  4. 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
  5. What’s Next For Progressive Web Apps Exklusive Einblicke in die

    Zukunft der Web-Apps Target Platforms PROGRESSIVE WEB APPS + cars, smart fridges, …
  6. What’s Next For Progressive Web Apps Exklusive Einblicke in die

    Zukunft der Web-Apps Web App Manifest Service Worker
  7. 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
  8. 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)
  9. Manifest Display Modes What’s Next For Progressive Web Apps Exklusive

    Einblicke in die Zukunft der Web-Apps PWA browser minimal-ui standalone fullscreen
  10. Now installable from Safari What’s Next For Progressive Web Apps

    Exklusive Einblicke in die Zukunft der Web-Apps PWA
  11. 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
  12. 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
  13. 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/
  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 Exklusive Einblicke in die Zukunft der Web-Apps PWA https://web.dev/install-criteria/
  15. 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
  16. 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
  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 Exklusive Einblicke in die Zukunft der Web-Apps PWA
  18. 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
  19. What’s Next For Progressive Web Apps Exklusive Einblicke in die

    Zukunft der Web-Apps The Future of Powerful APIs on the Web Platform
  20. 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
  21. 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
  22. Spotify What’s Next For Progressive Web Apps Exklusive Einblicke in

    die Zukunft der Web-Apps Use Cases https://open.spotify.com/
  23. VS Code What’s Next For Progressive Web Apps Exklusive Einblicke

    in die Zukunft der Web-Apps Use Cases https://vscode.dev/
  24. Photoshop What’s Next For Progressive Web Apps Exklusive Einblicke in

    die Zukunft der Web-Apps Use Cases https://creativecloud.adobe.com/cc/photoshop
  25. 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