Integrar PWAs a IUs de compartilhamento integradas com o Workbox

Como fazer com que seu PWA apareça ao lado de apps específicos da plataforma nas UIs de compartilhamento no nível do sistema

Jeff Posnick

Joe Medley

Sam Richard

A API Web Share Target permite mostrar seu app da Web progressivo na folha de compartilhamento no nível do sistema de um usuário depois que ele for instalado. Embora funcione muito bem se você tiver um servidor disponível para receber a solicitação, é muito mais difícil fazer com que funcione se você não tiver.

Neste artigo, vamos usar Workbox, um conjunto de bibliotecas JavaScript para adicionar suporte off-line a apps da Web, para criar um URL de destino de compartilhamento que reside inteiramente no service worker. Isso permite que sites estáticos e apps de página única sirvam como destinos de compartilhamento sem um endpoint de servidor dedicado.

Nesta página

Se você não estiver familiarizado com o funcionamento do Web Share Target, o artigo Recebimento de dados pessoais compartilhados com a API Web Share Target oferece uma introdução detalhada. Confira um resumo rápido.

Há duas partes para implementar a funcionalidade de destino de compartilhamento da Web. Primeiro, atualize o manifesto do app da Web para indicar que você quer que seu app seja um destino de compartilhamento quando instalado. O exemplo a seguir direciona compartilhamentos para o URL /share por meio de uma solicitação POST. Ele é codificado como um formulário multipartes, com o título chamado name, o texto chamado description e as imagens JPEG chamadas photos.

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

Destinos de compartilhamento de service worker com o Workbox

Embora normalmente seja processado por um endpoint de servidor, um truque interessante que você pode fazer para um destino de compartilhamento é registrar uma rota diretamente no service worker para processar a solicitação. Isso permite que seu app seja um destino de compartilhamento sem um back-end.

Para fazer isso no Workbox, registre uma rota processada pelo service worker. Comece importando registerRoute de 'workbox-routing'. Observe que ele está registrado para a rota /share, a mesma listada no manifesto do app da Web de exemplo. Em resposta, ele chama shareTargetHandler().

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

A função shareTargetHandler() é assíncrona e recebe o evento, aguarda os dados do formulário e recupera os arquivos de mídia.

async function shareTargetHandler ({event}) {
  const formData = await event.request.formData();
  const mediaFiles = formData.getAll('media');

  for (const mediaFile of mediaFiles) {
    // Do something with mediaFile
    // Maybe cache it or post it back to a server
  });

  // Do something with the rest of formData as you need
  // Maybe save it to IndexedDB
};

Em seguida, você pode fazer o que quiser com esses arquivos. É possível armazená-los em cache. Você pode enviá-los para algum lugar com uma solicitação de busca. Você pode até mesmo usar as outras opções de manifesto, talvez veiculando uma página com alguns parâmetros de consulta para os outros itens compartilhados ou armazenando os dados e os ponteiros para a mídia na API Cache Storage ou IndexedDB.

Você pode testar no app de exemplo Fugu Journal e conferir a implementação do service worker no código fonte.

Uma coisa comum que você pode fazer é manter os recursos compartilhados até que conexões de rede melhores estejam disponíveis. O Workbox também oferece suporte à sincronização periódica em segundo plano.

Conclusão

A API Share Target é uma maneira simples de integrar seu app da Web progressivo aos dispositivos dos usuários, colocando-os em pé de igualdade com aplicativos específicos da plataforma para a tarefa crítica de compartilhar conteúdo entre apps. No entanto, isso geralmente exige um servidor disponível para receber a solicitação. Ao aproveitar o Workbox para criar uma rota de destino de compartilhamento diretamente no service worker, seu app fica livre dessa restrição, permitindo que o Share Target funcione para apps off-line e sem back-ends.