Como receber arquivos compartilhados

Equilíbrio
Pagamento de equilíbrio

Primeiro, declare um share_target no manifesto do app da Web que lista um action (seu URL que processa arquivos compartilhados), um method ("POST" para arquivos) e um enctype ("multipart/form-data" para arquivos) e um objeto params que contém uma propriedade files com uma matriz de objetos com uma propriedade name e accept que lista os tipos de arquivo compartilháveis e o nome para recebê-los.

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

Em seguida, é preciso processar as solicitações POST recebidas no service worker. O arquivo é armazenado temporariamente em um cache de mídia para que possa ser consumido no cliente. Isso pode ser feito redirecionando o app para um URL com um parâmetro de consulta de marcador especial, como 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);
     
})(),
   
);
 
}
});

Por fim, você precisa consumir o arquivo no cliente.

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.
   
}
 
}
});

Compatibilidade com navegadores

  • 89
  • 89
  • x
  • x

Origem

Leia mais

Demonstração

<!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.
   
}
 
}
});