Integrar PWAs a IUs de compartilhamento integradas com o Workbox

Como fazer com que sua PWA apareça ao lado de apps específicos da plataforma em interfaces de compartilhamento no nível do sistema

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

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

Smartphone Android com a gaveta "Compartilhar por" aberta.
Seletor de destino de compartilhamento no nível do sistema com um PWA instalado chamado Share Target Test como uma opção.

Na mesma página

Se você não sabe como a Target do compartilhamento na Web funciona, Receber dados compartilhados com a API Target do compartilhamento na Web oferece uma introdução detalhada. Confira uma revisão rápida.

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


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

O service worker compartilha destinos com o Workbox

Embora normalmente seja processado por um endpoint do servidor, um truque legal que você pode fazer para um destino de compartilhamento é registrar uma rota diretamente no seu worker de serviço 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 que seja processada pelo service worker. Comece importando registerRoute de 'workbox-routing'. Observe que 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 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
};

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

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

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

Conclusão

A API Share Target é uma maneira simples de integrar profundamente seu app da Web progressiva aos dispositivos do usuário, colocando-os no mesmo nível dos aplicativos específicos da plataforma para a tarefa crucial de compartilhar conteúdo entre apps. Mas isso geralmente requer 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 Share Target funcione para apps off-line e sem backends.

Foto de Elaine Casap no Unsplash