Desiloing files on the web
Jay Harris
Eric Willigers
BlinkOn 10, April 2019
WebShare
WebShare
const data = {
title: "...",
text: "...",
url: "...",
files: [...]
};
navigator.share(data).then(() => {
...
}).catch((err) => {
...
});
WebShare
WebShareTarget
WebShareTarget
"share_target": {
"action": "...",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "...",
"accept": ["image/*"]
}
]
}
}
WebShareTarget
addEventListener('fetch', (event) => {
if (event.request.method !== 'POST') return;
event.waitUntil(async function () {
const data = await event.request.formData();
...
}());
});
WebShareTarget
WebShare + WebShareTarget
FileHandling (github.com/WICG/file-handling)
The Manifest
{
"name": "Cool Text Editor",
"file_handler": {
"action": "/handle_files"
"files": [
{
"name": "text",
"accept": [".txt", "text/*"]
}
]
}
}
Handling the request (very early, subject to change)
// Navigation to https://my-file-handler.example/handle_files?text=file-blob:<GUIDish>
const params = new URLSearchParams(window.location.search);
const fileHandles = params
.getAll('text')
.map(f => new FileSystemFileHandle(f));
// TODO: Do stuff with file handles
What is this `launch` event?
Launch events should provide a single place to handle WHERE launches should happen.
It’s going to replace all of those?
well, hopefully not...
Always open things in the existing window
self.addEventListener('launch', event => {
event.waitUntil(async () => {
const allClients = await clients.matchAll();
// If there isn't one available, open a new window.
if (allClients.length === 0) {
clients.openWindow(event.request.url);
event.preventDefault();
return;
}
const client = allClients[0];
client.focus();
event.preventDefault();
}());
});
Questions
Forget diamonds, web standards are forever (so ask away).