Compartilhar via

Integrar aplicativos Web progressivos ao Windows Share

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

O que é o Destino do compartilhamento?

Compartilhamento de Destino é um recurso que foi introduzido no Windows 8 e permite que um aplicativo receba dados de outro aplicativo. O Destino do compartilhamento 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 distribui 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. As PWAs podem usar a API de Compartilhamento da Web para disparar a exibição da Planilha de Compartilhamento no Windows. A API de Compartilhamento da Web tem suporte no Microsoft Edge e em outros navegadores baseados em Chromium.

Consulte o compartilhamento de conteúdo na documentação do Microsoft Edge para obter um exemplo completo de como compartilhar conteúdo 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 exemplo 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 do conteúdo compartilhado, o PWA é iniciado. Uma GET solicitação HTTP é feita à URL especificada pela action propriedade. Os dados compartilhados são passados como parâmetros de consulta title, text e url. A solicitação a seguir é feita: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

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

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

O service worker 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 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 somente para suporte de compartilhamento, possíveis problemas de latência poderão surgir à medida que as solicitações forem interrompidas pelo trabalhador do serviço. Para resolver esse problema, considere definir share_target como um pseudo sub-caminho e registrar um service worker especificamente com escopo 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 'impressora de logotipo PWA' no GitHub demonstra a integração de um PWA com o Painel de Compartilhamento do Windows. O aplicativo permite que os usuários imprimam o logotipo do PWA em uma impressora. O aplicativo usa a Planilha de Compartilhamento do Windows para compartilhar o logotipo com outros aplicativos.

Consulte também

  • Last updated on