Slide 1
Slide 1 text
Project Fugu
Progressive Web Apps, Superpowered
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
Hello, it’s me.
Project Fugu
Progressive Web Apps, Superpowered
Christian Liebel
Twitter:
@christianliebel
Email:
christian.liebel
@thinktecture.com
Angular & PWA
Slides:
thinktecture.com
/christian-liebel
Slide 3
Slide 3 text
Offline capability
Push messages
Webcam/microphone access
File System Access
Raw Clipboard Access
Font Table Access
Project Fugu
Progressive Web Apps, Superpowered
Slide 4
Slide 4 text
Project Fugu
Progressive Web Apps, Superpowered
Slide 5
Slide 5 text
Cross-Vendor Initiative Led By…
Project Fugu
Progressive Web Apps, Superpowered
Project Fugu – A More Capable Web
»Let’s bring the web
back – API by API«
Thomas Steiner, Google
Slide 6
Slide 6 text
Project Fugu
Progressive Web Apps, Superpowered
Project Fugu
https://goo.gle/fugu-api-tracker
Slide 7
Slide 7 text
Process
– Write an Explainer (https://github.com/WICG/native-file-
system/blob/master/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/native-file-system/)
Project Fugu
Progressive Web Apps, Superpowered
Project Fugu
Slide 8
Slide 8 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
Progressive Web Apps, Superpowered
Project Fugu
Slide 9
Slide 9 text
Project Fugu
Progressive Web Apps, Superpowered
Project Fugu
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
}
Project Fugu
Progressive Web Apps, Superpowered
Project Fugu
Slide 11
Slide 11 text
Badging API
Project Fugu
Progressive Web Apps, Superpowered
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
Project Fugu
Progressive Web Apps, Superpowered
Badging API
Slide 13
Slide 13 text
API
Set the badge
navigator.setAppBadge(5);
Clear the badge
navigator.clearAppBadge();
Project Fugu
Progressive Web Apps, Superpowered
Badging API
Slide 14
Slide 14 text
Shortcuts
Project Fugu
Progressive Web Apps, Superpowered
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
Project Fugu
Progressive Web Apps, Superpowered
Shortcuts
Slide 16
Slide 16 text
Web App Manifest Extension
{
"shortcuts": [
{
"name": "New Email message",
"description": "Compose a new email.",
"url": "/mails/new",
"icons": []
},
{
"name": "New Appointment",
"description": "Create a new appointment.",
"url": "/appointments/new"
}
]
}
Project Fugu
Progressive Web Apps, Superpowered
Shortcuts
Slide 17
Slide 17 text
Project Fugu
Progressive Web Apps, Superpowered
Slide 18
Slide 18 text
Screen Wake Lock
Project Fugu
Progressive Web Apps, Superpowered
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
Progressive Web Apps, Superpowered
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
Progressive Web Apps, Superpowered
Screen Wake Lock API
https://web.dev/wakelock/
Slide 21
Slide 21 text
Shape Detection API
Project Fugu
Progressive Web Apps, Superpowered
Slide 22
Slide 22 text
Faces Barcodes Text
Use Cases
Project Fugu
Progressive Web Apps, Superpowered
Shape Detection API
Slide 23
Slide 23 text
Face Detection API
if ('FaceDetector' in window) {
const img = document.querySelector('img');
const faceDetector = new FaceDetector();
const faces = await faceDetector.detect(img)
faces.forEach(face => {
console.log('Face found!', face.boundingBox);
});
}
Project Fugu
Progressive Web Apps, Superpowered
Shape Detection API
Slide 24
Slide 24 text
https://liebel.io/facedet
Project Fugu
Progressive Web Apps, Superpowered
Shape Detection API
DEMO
Slide 25
Slide 25 text
Project Fugu
Progressive Web Apps, Superpowered
Slide 26
Slide 26 text
Related: WebML
Machine Learning for the Web (WebML)
Goal: Low-level Web API for machine learning (Web Neural Network API)
Microsoft, Google, Apple, Mozilla on board
Project Fugu
Progressive Web Apps, Superpowered
Shape Detection API
Slide 27
Slide 27 text
Async Clipboard API
Project Fugu
Progressive Web Apps, Superpowered
Slide 28
Slide 28 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
Progressive Web Apps, Superpowered
Async Clipboard API
Slide 29
Slide 29 text
Native File System API
Project Fugu
Progressive Web Apps, Superpowered
Slide 30
Slide 30 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
Progressive Web Apps, Superpowered
Native File System API
Slide 31
Slide 31 text
API (may change!)
if ('chooseFileSystemEntries' in window) {
const handle = await window.chooseFileSystemEntries();
const file = await handle.getFile();
// do something with the file
} else {
// use fallback API or disable feature in app
}
Project Fugu
Progressive Web Apps, Superpowered
Native File System API
Slide 32
Slide 32 text
API (may change!)
const handle = await self.chooseFileSystemEntries({
type: 'open-file',
multiple: false,
readOnly: false,
accepts: [{
description: 'Images',
extensions: ['jpg', 'gif', 'png']
}]
});
Project Fugu
Progressive Web Apps, Superpowered
Native File System API
Slide 33
Slide 33 text
https://liebel.io/paint
LIVE DEMO
Project Fugu
Progressive Web Apps, Superpowered
Async Clipboard & NativeFS
Slide 34
Slide 34 text
Project Fugu
Progressive Web Apps, Superpowered
Summary
Slide 35
Slide 35 text
- Project Fugu helps the web to become more and more capable
- Project Fugu APIs could bring many more app experiences to the web
(IDEs, productivity apps, etc.)
- But: Web is threatened by alternative approaches and platforms,
support for modern Web API varies from platform to platform
- You can make a difference!
- File bugs in browser engine bugtrackers
- File Fugu requests: https://goo.gle/new-fugu-request
Project Fugu
Progressive Web Apps, Superpowered
Summary
Slide 36
Slide 36 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]