Integrar PWAs a IUs de compartilhamento integradas com o Workbox

Como fazer o 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 exibir seu Progressive Web App em uma planilha de compartilhamento no nível do sistema de um usuário após a instalação. Embora funcione muito bem se você tiver um servidor disponível para receber a solicitação, será muito mais difícil trabalhar se não o fizer.

Neste artigo, usaremos 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 sirvam como destinos de compartilhamento sem um endpoint de servidor dedicado.

Na mesma página

Se você não sabe como funciona o destino do compartilhamento da Web, o artigo Como receber dados compartilhados com a API Web Share Target apresenta uma introdução detalhada. Aqui está uma revisão rápida.

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

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

Metas de compartilhamento do service worker com o Workbox

Embora normalmente seja processado por um endpoint do servidor, um truque interessante que pode ser feito para um alvo de compartilhamento é registrar uma rota diretamente no service worker para lidar com a solicitação. Isso vai permitir que o app seja um alvo de compartilhamento sem um back-end.

Para fazer isso no Workbox, registre uma rota que é processada pelo service worker. Comece importando registerRoute de 'workbox-routing'. Observe que ela está registrada 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 dele.

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

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

É possível testá-lo no app de exemplo Fugu Journal e ver a implementação do service worker no código fonte dele.

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

Conclusão

A API Share Target é uma maneira simples de integrar profundamente seu App Web Progressivo aos dispositivos dos usuários, colocando-os no mesmo nível que aplicativos específicos da plataforma para a tarefa essencial de compartilhar conteúdo entre apps. No entanto, 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, o app não terá essas restrições. Isso permite que o Share Target funcione para apps off-line e sem back-ends.

Foto de Elaine Casap no Unsplash