Come ricevere i file condivisi

Palances Liao
Palances Liao

Innanzitutto, dichiara un share_target nel file manifest dell'app web che elenca action (l'URL che gestisce i file condivisi), method ("POST" per i file) e enctype ("multipart/form-data" per i file) e un oggetto params contenente una proprietà files con un array di oggetti con una proprietà name e accept che elenca i tipi di file condivisibili e il nome per ottenerli.

{
 
"share_target": {
   
"action": "/receive-files/",
   
"method": "POST",
   
"enctype": "multipart/form-data",
   
"params": {
     
"files": [
       
{
         
"name": "image",
         
"accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
       
}
     
]
   
}
 
}
}

Dovrai quindi gestire le richieste POST in entrata nel service worker. Il file viene temporaneamente archiviato in una cache multimediale, in modo da poter essere utilizzato nel client. A tale scopo, reindirizza l'app a un URL con uno speciale parametro di query dell'indicatore come share-target.

self.addEventListener('fetch', (fetchEvent) => {
 
if (fetchEvent.request.url.endsWith('/receive-files/') && fetchEvent.request.method === 'POST') {
   
return fetchEvent.respondWith(
     
(async () => {
       
const formData = await fetchEvent.request.formData();
       
const image = formData.get('image');
       
const keys = await caches.keys();
       
const mediaCache = await caches.open(keys.filter((key) => key.startsWith('media'))[0]);
        await mediaCache
.put('shared-image', new Response(image));
       
return Response.redirect('./?share-target', 303);
     
})(),
   
);
 
}
});

Infine, devi utilizzare il file nel client.

window.addEventListener('load', async () => {
 
if (location.search.includes('share-target')) {
   
const keys = await caches.keys();
   
const mediaCache = await caches.open(
      keys
.filter((key) => key.startsWith('media'))[0],
   
);
   
const image = await mediaCache.match('shared-image');
   
if (image) {
     
const blob = await image.blob();
      await mediaCache
.delete('shared-image');
     
// Handle the shared file somehow.
   
}
 
}
});

Supporto del browser

  • 89
  • 89
  • x
  • x

Fonte

Per approfondire

Demo

<!DOCTYPE html>
<html lang="en">
 
<head>
   
<meta charset="utf-8" />
   
<meta name="viewport" content="width=device-width, initial-scale=1" />
   
<link rel="manifest" href="manifest.json" />
   
<title>How to receive shared files</title>
   
<link rel="stylesheet" href="style.css" />
   
<!-- TODO: Devsite - Removed inline handlers -->
   
<!-- <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', async () => {
          const registration = await navigator.serviceWorker.register(
            'sw.js',
          );
          console.log(
            'Service worker registered for scope',
            registration.scope,
          );
        });
      }
    </script>
    <script src="script.js" type="module"></script> -->

 
</head>
 
<body>
   
<h1>How to receive shared files</h1>
   
<p>Install the app. After the installation, try sharing an image to it from another app.
 
</body>
</html>

        html
{
 
box-sizing: border-box;
 
font-family: system-ui, sans-serif;
 
color-scheme: dark light;
}

*, *:before, *:after {
 
box-sizing: inherit;
}

body
{
 
margin: 1rem;
}

img
{
 
height: auto;
 
max-width: 100%;
 
display: block;
}
       

        window
.addEventListener('load', async () => {
 
if (location.search.includes('share-target')) {
   
const keys = await caches.keys();
   
const mediaCache = await caches.open(
      keys
.filter((key) => key.startsWith('media'))[0],
   
);
   
const image = await mediaCache.match('shared-image');
   
if (image) {
     
const blob = await image.blob();
      await mediaCache
.delete('shared-image');
     
// Handle the shared file somehow.
   
}
 
}
});