Progressive Web Apps
Capable
The Powerful Web
What can you do on the web today that you couldn’t 3 years ago?
Web Capabilities Project (Fugu)
Make web apps as capable as Android, iOS, or desktop apps by exposing their capabilities to the web while maintaining the web’s core tenets of security, privacy, and trust.
Track Capabilities
goo.gle/fugu-api-tracker
Request a Capability
webwewant.fyi
Trying Upcoming Features
Origin Trials
talks.page.link/origin-trials
Enabling an�Origin Trial
Enabling an�Origin Trial
Enabling an�Origin Trial
Enabling an�Origin Trial
<head>
<!-- ... -->
<!-- Origin Trial Meta Tag -->
<meta http-equiv="origin-trial" content="ApZNhqyvruqAWlyPv…dHJ1ZX0=" />
<!-- ... -->
</head>
Empowering Your PWA
Empowering your PWA - File System Access
File System Access - Opening a File
// Have the user select a file
const [ handler ] = await window.showOpenFilePicker();
// Get the File object from the handler
const file = await handler.getFile();
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();
File System Access - Saving Changes
// Make a writable stream from the handler
const writable = await handler.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();
Empowering your PWA - File Handling API
File Handling - Receiving Files
launchQueue.setConsumer((launchParams) => {
// Nothing to do when the queue is empty.
if (!launchParams.files.length) return;
for (const handler of launchParams.files) {
// Handle the file.
}
});
Empowering your PWA - Multi-Screen Window Placement
Multi-Screen - Getting Screen Info
// Request an interface with a FrozenArray of live Screen-inheriting objects.
const screensInterface = await window.getScreens();
screensInterface.screens[0].isPrimary; // e.g. true
screensInterface.screens[0].isInternal; // e.g. true
screensInterface.screens[0].pointerTypes; // e.g. ["touch"]
screensInterface.screens[0].label; // e.g. 'Samsung Electric Company 28"'
// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screensInterface.currentScreen;
screensInterface.addEventListener('change', function() {
// NOTE: Does not fire on changes to attributes of individual Screens.
const screenCount = screensInterface.screens.length;
const currentScreen screensInterface.currentScreen.id;
});
Empowering your PWA - Screen Wake Lock
Screen Wake Lock
// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();
// Listen for wake lock release
wakeLock.addEventListener('release', () => {
console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();
Try It Out - 45 Minutes
https://workshops.page.link/pwa05--empowering-your-pwa
wakeLock.release();