Slide 1
Slide 1 text
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle
Entwicklungen
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Slide 3
Slide 3 text
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Responsive Linkable Discoverable Installable App-like
Connectivity
Independent
Fresh Safe Re-engageable Progressive
Slide 4
Slide 4 text
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Web App
Manifest
Service
Worker
Slide 5
Slide 5 text
2016 à 2022
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Slide 6
Slide 6 text
Web Native
Web App Gap
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Progressive Web Apps
Web App Gap
Slide 7
Slide 7 text
✅ Installable
✅ Music player
✅ Shares code with existing app
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Use Cases
Slide 8
Slide 8 text
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Spotify
https://open.spotify.com/
Slide 9
Slide 9 text
✅ Installable
✅ Productivity app
✅ Shares code with existing app
✅ Offline capable
✅ Access to clipboard
✅ Access to local files
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Use Cases
Slide 10
Slide 10 text
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
VS Code
https://vscode.dev/
Slide 11
Slide 11 text
✅ Productivity app
✅ Provides powerful functions
✅ Makes pre-existing functions available
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Use Cases
Slide 12
Slide 12 text
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Photoshop
https://creativecloud.adobe.com/cc/photoshop
Slide 13
Slide 13 text
Installability ✓
Offline capability ✓ ✓ ✓
Push messages ✓ (✓) ✓
Clipboard access ✓ ✓
File system access ✓
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Desktop Support
Slide 14
Slide 14 text
✅ Installable
✅ Offline capable
✅ Productivity app
✅ Access to clipboard
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Use Cases
Slide 15
Slide 15 text
https://paint.js.org
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
LIVE DEMO
Slide 16
Slide 16 text
✅ Installable
✅ Social network
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Use Cases
Slide 17
Slide 17 text
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Twitter
Slide 18
Slide 18 text
Installability ✓ ✓ ?
Offline capability ✓ ✓ ✓
Push messages ✓ 2023 ✓
Clipboard access ✓ ✓
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Mobile Support
Slide 19
Slide 19 text
Suitable
– Productivity apps
– Social networks
– Line of business apps
Not suitable
– Drivers
– Antivirus apps
– Cloud sync clients
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Use Cases
Slide 20
Slide 20 text
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Target Platforms
+ cars, smart fridges, …
Slide 21
Slide 21 text
Project Fugu
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Progressive Web Apps
»Let’s bring the web
back – API by API«
Thomas Steiner, Google
Slide 22
Slide 22 text
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Project Fugu
https://fugu-tracker.web.app/
Slide 23
Slide 23 text
macOS: late 2022 with Safari 16 and macOS Ventura
iOS/iPadOS: 2023
Safari does not need to be open in order to receive push messages.
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Push on iOS
Slide 24
Slide 24 text
Starting with Safari 15 on iOS/iPadOS, the theme_color (15.0) and icons
(15.4) are also read from the manifest.
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Web App Manifest Support on iOS
Slide 25
Slide 25 text
– Focus shifted from mobile to desktop
– PWAs are very mature on desktop + Chromium-based browsers
– Project Fugu adds missing capabilities
– PWAs are catching up on iOS and iPadOS: push is soon available,
additional Web App Manifest fields are supported
– Apple implements some Fugu APIs (except hardware-related APIs)
– No major updates by Firefox
Progressive Web Apps auf Mobile & Desktop
Einsatzgebiete, Plattformen, aktuelle Entwicklungen
Summary
Slide 26
Slide 26 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]