Partilhar via

Integre aplicativos Web progressivos com o Windows Share

Este artigo explica como integrar um PWA (Progressive Web App) com o recurso de compartilhamento do Windows . Esse 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 é Share Target?

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

Compartilhar conteúdo do seu PWA

Para compartilhar conteúdo, um PWA gera conteúdo (como texto, links ou arquivos) e transfere o conteúdo compartilhado para o 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 da Web para acionar a exibição da Planilha de Compartilhamento no Windows. A API de compartilhamento da Web é suportada no Microsoft Edge e em outros navegadores baseados no Chromium.

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

Receba ficheiros partilhados no 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 o seguinte exemplo de configuração de manifesto 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 action propriedade. Os dados compartilhados são passados como os parâmetros de consulta title, text e url. É feito o seguinte pedido: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

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

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

O service worker lida com 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 Recebendo conteúdo compartilhado na documentação do Microsoft Edge para obter mais informações.

Considerações sobre desempenho

Se o manipulador de busca for adicionado exclusivamente 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 pseudocaminho e registar um service worker com escopo 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

A aplicação de exemplo impressora de logotipo do PWA no GitHub demonstra como integrar um PWA com a Planilha de Partilha do Windows. O aplicativo permite que os usuários imprimam o logotipo do PWA em uma impressora. A aplicação utiliza a Folha de Partilha do Windows para partilhar o logótipo com outras aplicações.

Ver também

  • Last updated on