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]