Slide 1
Slide 1 text
What’s Next For Progressive Web Apps
Exklusive Einblicke in die Zukunft der
Web-Apps
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
Exklusive Einblicke in die Zukunft der Web-Apps
What’s Next For Progressive Web Apps
Slide 4
Slide 4 text
Exklusive Einblicke in die Zukunft der Web-Apps
What’s Next For Progressive Web Apps
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
What’s Next For Progressive Web Apps
Exklusive Einblicke in die Zukunft der Web-Apps
Demo Use Case
Slide 7
Slide 7 text
Exklusive Einblicke in die Zukunft der Web-Apps
What’s Next For Progressive Web Apps
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
What’s Next For Progressive Web Apps
Exklusive Einblicke in die Zukunft der Web-Apps
Target Platforms
PROGRESSIVE WEB APPS
+ cars, smart fridges, …
Slide 10
Slide 10 text
What’s Next For Progressive Web Apps
Exklusive Einblicke in die Zukunft der Web-Apps
Web App
Manifest
Service
Worker
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
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)
Slide 13
Slide 13 text
Manifest Display Modes
What’s Next For Progressive Web Apps
Exklusive Einblicke in die Zukunft der Web-Apps
PWA
browser minimal-ui standalone fullscreen
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Now installable from Safari
What’s Next For Progressive Web Apps
Exklusive Einblicke in die Zukunft der Web-Apps
PWA
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
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/
Slide 19
Slide 19 text
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/
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
What’s Next For Progressive Web Apps
Exklusive Einblicke in die Zukunft der Web-Apps
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
What’s Next For Progressive Web Apps
Exklusive Einblicke in die Zukunft der Web-Apps
The Future of Powerful APIs on the Web Platform
Slide 26
Slide 26 text
What’s Next For Progressive Web Apps
Exklusive Einblicke in die Zukunft der Web-Apps
Web Install API
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
Spotify
What’s Next For Progressive Web Apps
Exklusive Einblicke in die Zukunft der Web-Apps
Use Cases
https://open.spotify.com/
Slide 30
Slide 30 text
VS Code
What’s Next For Progressive Web Apps
Exklusive Einblicke in die Zukunft der Web-Apps
Use Cases
https://vscode.dev/
Slide 31
Slide 31 text
Photoshop
What’s Next For Progressive Web Apps
Exklusive Einblicke in die Zukunft der Web-Apps
Use Cases
https://creativecloud.adobe.com/cc/photoshop
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]