Slide 1
Slide 1 text
Project Fugu
So erobern Produktivitätsanwendungen
jetzt auch das Web
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
Hello, it’s me.
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Christian Liebel
Twitter:
@christianliebel
Email:
christian.liebel
@thinktecture.com
Angular & PWA
Slides:
thinktecture.com
/christian-liebel
Slide 3
Slide 3 text
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
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
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Slide 5
Slide 5 text
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Slide 6
Slide 6 text
Cross-Vendor Initiative Led By…
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Project Fugu – A More Capable Web
»Let’s bring the web
back – API by API«
Thomas Steiner, Google
Slide 7
Slide 7 text
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Project Fugu
https://goo.gle/fugu-api-tracker
Slide 8
Slide 8 text
Process
– Write an Explainer (https://github.com/WICG/file-system-
access/blob/main/EXPLAINER.md)
– Discuss capability with developers, browser vendors, standard orgs
– Iterate
– Compile a design document
– W3C TAG Review (https://github.com/w3ctag/design-
reviews/issues/390)
– Formal spec within Web Incubator Community Group (WICG,
https://wicg.github.io/file-system-access/)
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Project Fugu
Slide 9
Slide 9 text
Process
– Implementation in Chromium
– Launches behind a flag (chrome://flags/#enable-experimental-web-
platform-features)
– Origin Trial (https://developers.chrome.com/origintrials/)
– Transfer to W3C Working Group + Recommendation?
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Project Fugu
Slide 10
Slide 10 text
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Project Fugu
navigator.share({ url: 'http://example.com' });
ShareIntent DataTransferManager
…
NSSharingServicePicker
Slide 11
Slide 11 text
Progressive Enhancement
if ('share' in navigator) {
navigator.share({ text: 'Hi!' });
} else {
// Fallback method
}
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Project Fugu
Slide 12
Slide 12 text
Badging API
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Slide 13
Slide 13 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
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Badging API
Slide 14
Slide 14 text
API
Set the badge
navigator.setAppBadge(5);
Clear the badge
navigator.clearAppBadge();
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Badging API
Slide 15
Slide 15 text
Shortcuts
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Slide 16
Slide 16 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
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Shortcuts
Slide 17
Slide 17 text
Web App Manifest Extension
{
"shortcuts": [
{
"name": "Direct Messages",
"url": "/mails/new",
"icons": []
},
{
"name": "Notifications",
"url": "/appointments/new",
"icons": []
}
]
}
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Shortcuts
Slide 18
Slide 18 text
Screen Wake Lock
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Slide 19
Slide 19 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
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Screen Wake Lock API
Slide 20
Slide 20 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);
}
}
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Screen Wake Lock API
https://web.dev/wake-lock/
Slide 21
Slide 21 text
https://paint.js.org
LIVE DEMO
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Async Clipboard & FS Access
Slide 22
Slide 22 text
Async Clipboard API
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Slide 23
Slide 23 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();
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Async Clipboard API
Slide 24
Slide 24 text
File System Access API
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Slide 25
Slide 25 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?
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
File System Access API
Slide 26
Slide 26 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
}
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
File System Access API
Slide 27
Slide 27 text
API
const [handle] = await self.showOpenFilePicker({
multiple: true,
types: [{
description: 'PNG files',
accept: {'image/png': ['.png']}
}]
});
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
File System Access API
Slide 28
Slide 28 text
File System Handling API
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Slide 29
Slide 29 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
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
File System Handling API
Slide 30
Slide 30 text
Manifest Extension
{
"file_handlers": [{
"action": "/",
"accept": {
"image/png": [".png"]
}
}]
}
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
File System Handling API
Slide 31
Slide 31 text
API
if ('launchQueue' in window) {
launchQueue.setConsumer(async params => {
const [handle] = params.files;
// do something with the handle
});
}
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
File System Handling API
Slide 32
Slide 32 text
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Summary
Slide 33
Slide 33 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!
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Summary
Slide 34
Slide 34 text
Q&A
Project Fugu
So erobern Produktivitätsanwendungen jetzt auch das Web
Slide 35
Slide 35 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]