Partilhar via

Integrar Aplicativos Web Progressivos com o Windows Share

  • Artigo

Este artigo explica como integrar um PWA (Aplicativo Web Progressivo) com o recurso Windows Share. Este recurso permite que os usuários compartilhem conteúdo de um aplicativo do Windows para outro. O PWA se registra como um Destino de compartilhamento para receber e manipular arquivos compartilhados dentro do aplicativo.

O que é Destino de compartilhamento?

O Destino de compartilhamento é um recurso que foi introduzido no Windows 8 e permite que um aplicativo receba dados de outro aplicativo. O Destino de compartilhamento funciona como uma Área de Transferência, mas com conteúdo dinâmico.

Compartilhar conteúdo a partir do seu PWA

Para compartilhar conteúdo, um PWA gera conteúdo (como texto, links ou arquivos) e entrega o conteúdo compartilhado ao sistema operacional. O sistema operacional permite que o usuário decida qual aplicativo deseja usar para receber esse conteúdo. Os PWAs podem usar a API de Compartilhamento Web para acionar a exibição da Share Sheet no Windows. A API de compartilhamento Web é compatível com o Microsoft Edge e com outros navegadores baseados no Chromium.

Consulte Compartilhar conteúdo na documentação do Microsoft Edge para obter um exemplo completo de como compartilhar conteúdo a partir de um PWA.

Receber arquivos compartilhados em seu PWA

Para receber conteúdo, um PWA atua como um destino de conteúdo. O PWA deve ser registrado no sistema operacional como um destino de compartilhamento de conteúdo.

O share_target membro deve conter as informações necessárias para que o sistema passe o conteúdo compartilhado para seu aplicativo. Considere a seguinte configuração de manifesto de exemplo share_target:

"share_target": {
  "action": "./share_target_path/?custom_param=foo",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "mapped_files",
        "accept": ["image/jpeg"]
      }
    ]
  }
},

Quando seu aplicativo é selecionado pelo usuário como o destino para conteúdo compartilhado, o PWA é iniciado. Uma GET solicitação HTTP é feita para a URL especificada pela propriedade action. Os dados compartilhados são passados como os parâmetros de consulta title, text e url. É feita a seguinte solicitação: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

O exemplo a seguir ilustra como registrar o trabalhador de serviço em escopo:

navigator.serviceWorker.register('scoped-service-worker.js',
                { scope: "./share_target_path/" })

O trabalhador de serviço manipula os dados de compartilhamento conforme desejado e, em seguida, atende à solicitação ou pode redirecionar a solicitação de volta para fora do caminho personalizado. O exemplo a seguir ilustra como redirecionar a solicitação de volta para fora do caminho personalizado:

self.addEventListener('fetch', (event) => {
    event.respondWith((async () => {
        // Read the shared data here, then
        // Redirect back out of the share_target_path to the actual site
        return Response.redirect(event.request.url.replace("share_target_path/", ""));
    })());
    return;
});

Consulte o exemplo Receber conteúdo compartilhado na documentação do Microsoft Edge para obter mais informações.

Considerações sobre o desempenho

Se o manipulador de busca for adicionado apenas para suporte de compartilhamento, possíveis problemas de latência podem surgir à medida que as solicitações são interrompidas pelo trabalhador de serviço. Para resolver esse problema, considere definir o share_target como um pseudo subcaminho e registrar um trabalhador de serviço especificamente definido para esse caminho. Essa abordagem permite o uso de um manipulador de busca para o destino de compartilhamento sem registrar o mesmo manipulador de busca para outras chamadas.

Aplicativo PWA de exemplo

O aplicativo de exemplo de impressora de logotipo do PWA no GitHub demonstra como integrar um PWA com a Windows Share Sheet. O aplicativo permite que os usuários imprimam o logotipo do PWA em uma impressora. O aplicativo usa a Windows Share Sheet para compartilhar o logotipo com outros aplicativos.

Confira também