Integrar PWAs a IUs de compartilhamento integradas com o Workbox

Como fazer seu PWA aparecer ao lado de apps específicos da plataforma em interfaces 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 em uma página de compartilhamento no nível do sistema do usuário depois que ele é instalado. Ele funciona muito bem se você tiver um servidor disponível para receber a solicitação, mas é muito mais difícil de usar se não tiver.

Neste artigo, vamos usar o Workbox, um conjunto de bibliotecas JavaScript para adicionar suporte off-line a apps da Web e criar um URL de destino de compartilhamento que fica totalmente dentro do seu 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.

Na mesma página

Se você não sabe como o Web Share Target funciona, Receber dados 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 na Web. Primeiro, atualize o manifesto do app da Web para indicar que você quer que ele seja um destino de compartilhamento quando instalado. O exemplo a seguir direciona compartilhamentos para o URL /share por uma solicitação POST. Ele é codificado como um formulário de várias partes, 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"]
      }
    ]
  }
}
…

Compartilhamento de destinos do 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'. Ele está registrado para a rota /share, a mesma listada no exemplo de manifesto do app da Web. Em resposta, ele chama shareTargetHandler().

import { registerRoute } from 'workbox-routing';

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

A função shareTargetHandler() é assíncrona e usa 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
};

Depois, você pode fazer o que quiser com esses arquivos. Você pode armazená-las em cache. É possível enviá-los para algum lugar com uma solicitação de busca. Você pode até 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 no IndexedDB.

Teste no app de exemplo Fugu Journal e confira a implementação do service worker no código fonte.

Uma ação comum é manter 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 profundamente 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. Mas isso geralmente exige um servidor disponível para receber a solicitação. Ao usar o Workbox para criar uma rota de destino de compartilhamento diretamente no service worker, seu app fica livre dessa restrição, permitindo que o destino de compartilhamento funcione para apps off-line e sem back-ends.

Foto de Elaine Casap no Unsplash (links em inglês).