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

A API Web Share Target permite exibir seu Progressive Web App em um planilha de compartilhamento no nível do sistema do usuário após a instalação. Embora isso funcione muito bem se você tiver um servidor disponível para receber a solicitação, é muito mais difícil trabalhar se você não fizer isso.

Neste artigo, vamos usar Workbox, um conjunto de JavaScript; bibliotecas para adicionar suporte off-line a apps da Web, para criar um URL de alvo de compartilhamento que reside inteiramente dentro do seu service worker. Isso permite que sites estáticos e os aplicativos de página única servem como alvos de compartilhamento sem um endpoint de servidor dedicado.

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

Na mesma página

Se você não sabe como funciona o alvo de compartilhamento da Web, Como receber dados compartilhados com o compartilhamento da Web A API de destino apresenta uma introdução detalhada. Vamos fazer uma revisão rápida.

Há duas partes na implementação da funcionalidade de alvo de compartilhamento na Web. Primeiro, atualize o manifesto do app da Web para indicar que você quer que o app seja compartilhado. quando instalados. O exemplo a seguir direciona os compartilhamentos para o URL /share por uma solicitação POST. É codificado como um formulário de várias partes, com o título sendo chamado name, texto com o nome description e imagens JPEG com o nome 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 seja normalmente processado por um endpoint de servidor, um truque interessante que você pode fazer para um compartilhamento o destino é registrar uma rota diretamente no service worker para processar a solicitação. Isso permitirá que seu app seja um alvo de compartilhamento sem um back-end.

Para fazer isso no Workbox, registrar uma rota processada pelo service worker. Começar pela importação registerRoute de 'workbox-routing'. Observe que ele está registrado no 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 usa o evento, aguarda os dados do formulário e recupera os arquivos de mídia a partir deles.

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. Eles podem ser armazenados em cache. Você pode enviá-los para algum lugar com uma solicitação de busca. Você pode até mesmo usar o outro de manifesto do aplicativo, talvez a veiculação de uma página com alguns parâmetros de consulta para itens compartilhados ou armazenar os dados e ponteiros para a mídia no armazenamento em cache API ou o IndexedDB.

Teste no app de exemplo Fugu Diário e consultar o service worker implementação na origem o código.

Uma coisa comum que você pode fazer é manter os recursos compartilhados até que uma rede quando há conexão disponível. A caixa de trabalho também oferece suporte a segundos periódicos sincronização.

Conclusão

A API Share Target é uma maneira simples de fazer uma integração profunda da sua Progressive Web nos dispositivos dos usuários, além de apps específicos da plataforma para uma tarefa crítica de compartilhamento de conteúdo entre aplicativos. Mas fazer isso geralmente requer de rede disponível para receber a solicitação. Usando o Workbox para criar um compartilhamento. a rota de destino diretamente no service worker, seu app não tem esse o que permite que o alvo de compartilhamento funcione para apps off-line e sem conexão com a Internet back-ends de aplicativos.

Foto de Elaine Casap no Unsplash