Slide 1
Slide 1 text
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
Hello, it’s me.
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Christian Liebel
Twitter:
@christianliebel
Email:
christian.liebel
@thinktecture.com
Angular & PWA
Slides:
thinktecture.com
/christian-liebel
Slide 3
Slide 3 text
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Web App
Manifest
Service
Worker
Slide 4
Slide 4 text
✅ Offline capability
✅ Push messages
✅ Webcam/microphone access
File System Access
Raw Clipboard Access
Local Font Access
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Slide 5
Slide 5 text
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Slide 6
Slide 6 text
Cross-Vendor Initiative Led By…
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Project Fugu – A More Capable Web
»Let’s bring the web
back – API by API«
Thomas Steiner, Google
Slide 7
Slide 7 text
https://paint.js.org
LIVE DEMO
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Slide 8
Slide 8 text
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Project Fugu
https://goo.gle/fugu-api-tracker
P
Slide 9
Slide 9 text
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Project Fugu
Browser
navigator.share({ url: 'http://example.com' });
ShareIntent DataTransferManager
…
NSSharingServicePicker
Slide 10
Slide 10 text
Progressive Enhancement
if ('share' in navigator) {
navigator.share({ text: 'Hi!' });
} else {
// Fallback method
}
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Project Fugu
Slide 11
Slide 11 text
Badging API
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Slide 12
Slide 12 text
Motivation
- Communicate updates
without distracting the
user (in constrast to push
notifications)
- Typically displays a badge
on the home screen, task
bar or dock
- Appearance varies from
platform to platform
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Badging API
Slide 13
Slide 13 text
API
Set the badge
navigator.setAppBadge(5);
Clear the badge
navigator.clearAppBadge();
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Badging API
Slide 14
Slide 14 text
Shortcuts
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Slide 15
Slide 15 text
Provide secondary entry points
for your application, now also
for Progressive Web Apps
added to the home screen
Windows: Jump List
iOS: Home Screen Quick
Actions
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Shortcuts
Slide 16
Slide 16 text
Web App Manifest Extension
{
"shortcuts": [
{
"name": "Direct Messages",
"url": "/mails/new",
"icons": []
},
{
"name": "Notifications",
"url": "/appointments/new",
"icons": []
}
]
}
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Shortcuts
Slide 17
Slide 17 text
Screen Wake Lock
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Slide 18
Slide 18 text
Motivation
- Devices go to sleep in order to reduce energy consumption
- However, this can get bothersome in some situations (e.g. while
watching a movie, while cooking, etc.)
- The Screen Wake Lock API prevents the device from turning of the
screen while the application has the wake lock
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Screen Wake Lock API
Slide 19
Slide 19 text
API
let wakeLockObj;
if ('wakeLock' in navigator) {
try {
wakeLockObj = await navigator.wakeLock.request('screen');
console.log('👍', 'Screen Wake Lock', wakeLockObj);
} catch (err) {
console.error('👎', 'Screen Wake Lock', err);
}
}
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Screen Wake Lock API
https://web.dev/wake-lock/
Slide 20
Slide 20 text
Async Clipboard API
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Slide 21
Slide 21 text
API
Copy Content
await navigator.clipboard.writeText('foo');
await navigator.clipboard.write(/* data */);
Paste Content
const content = await navigator.clipboard.readText();
const content = await navigator.clipboard.read();
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Async Clipboard API
Slide 22
Slide 22 text
File System Access API
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Slide 23
Slide 23 text
Motivation
- Currently, websites only have very limited access to the file system
- Some applications heavily rely on working with files (e.g. Visual Studio
Code)
- Wouldn’t it be great if your web application could open files or folders
from the native file system?
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
File System Access API
Slide 24
Slide 24 text
API
if ('showOpenFilePicker' in window) {
const [handle] = await window.showOpenFilePicker();
const file = await handle.getFile();
// do something with the file
} else {
// use fallback API or disable feature in app
}
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
File System Access API
Slide 25
Slide 25 text
API
const [handle] = await self.showOpenFilePicker({
multiple: true,
types: [{
description: 'PNG files',
accept: {'image/png': ['.png']}
}]
});
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
File System Access API
Slide 26
Slide 26 text
File System Handling API
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Slide 27
Slide 27 text
Motivation
Register your PWA as a handler for file extensions
Requires installing the application first
Declare supported extensions in Web App Manifest and add imperative
code to your application logic
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
File System Handling API
Slide 28
Slide 28 text
Manifest Extension
{
"file_handlers": [{
"action": "/",
"accept": {
"image/png": [".png"]
}
}]
}
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
File System Handling API
Slide 29
Slide 29 text
API
if ('launchQueue' in window) {
launchQueue.setConsumer(async params => {
const [handle] = params.files;
// do something with the handle
});
}
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
File System Handling API
Slide 30
Slide 30 text
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Summary
P
Slide 31
Slide 31 text
New powerful APIs regularly ship with new releases of Chromium-based
browsers
Some only add minor finishing touches, others enable whole application
categories as productivity apps to finally make the shift to the web
Some APIs already made their way into other browsers (e.g., Web Share)
Fugu process makes sure that capabilities are implemented in a secure,
privacy-preserving manner
Let’s make the web a more capable platform!
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Summary
Slide 32
Slide 32 text
Q&A
Progressive Web Apps jenseits von Mobile
Desktop-PWAs mit Fugu
Slide 33
Slide 33 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]