Compartilhar conteúdo com outros aplicativos

O compartilhamento de conteúdo entre aplicativos tornou-se popular por dispositivos móveis, onde a manipulação de arquivos ou a cópia de conteúdo é menos intuitiva do que em sistemas operacionais de desktop. Por exemplo, no celular, é comum compartilhar uma imagem com um amigo enviando uma mensagem de texto. Mas o compartilhamento de conteúdo não é reservado para dispositivos móveis; também é possível compartilhar entre aplicativos no Windows.

Há duas direções para compartilhar conteúdo, e ambas as direções podem ser tratadas por Aplicativos Web Progressivos (PWAs):

Os PWAs que se registram como destinos de compartilhamento parecem nativamente integrados ao sistema operacional e são mais envolventes para os usuários.

Compartilhando conteúdo

Os PWAs podem usar a API de Compartilhamento da Web para disparar a exibição da caixa de diálogo de compartilhamento do sistema operacional.

O compartilhamento da Web só funciona em sites servidos por HTTPS (que é o caso dos PWAs) e só pode ser invocado em resposta a uma ação do usuário.

Para compartilhar conteúdo como links, texto ou arquivos, use a navigator.share função, conforme mostrado abaixo. A navigator.share função aceita um objeto que deve ter pelo menos uma das seguintes propriedades:

• title: um título curto para o conteúdo compartilhado.
• text: uma descrição mais longa do conteúdo compartilhado.
• url: o endereço de um recurso a ser compartilhado.
• files: uma matriz de arquivos a serem compartilhados.

function shareSomeContent(title, text, url) {
  if (!navigator.share) {
    return;
  }

  navigator.share({title, text, url}).then(() => {
    console.log('The content was shared successfully');
  }).catch(error => {
    console.error('Error sharing the content', error);
  });
}

No código acima, primeiro marcamos se o navegador suporta compartilhamento da Web, testando se navigator.share está definido. A navigator.share função retorna um objeto Promise que é resolvido quando o compartilhamento é bem-sucedido e rejeita quando ocorre um erro.

Como uma promessa é usada aqui, o código acima pode ser reescrito como uma async função, da seguinte maneira:

async function shareSomeContent(title, text, url) {
  if (!navigator.share) {
    return;
  }

  try {
    await navigator.share({title, text, url});
    console.log('The content was shared successfully');
  } catch (e) {
    console.error('Error sharing the content', e);
  }
}

No Windows, o código acima disparará a caixa de diálogo de compartilhamento, permitindo que o usuário escolha um aplicativo para receber o conteúdo compartilhado. A caixa de diálogo de compartilhamento é mostrada abaixo:

Depois que o usuário seleciona um aplicativo para receber o conteúdo compartilhado, cabe a esse aplicativo lidar com isso da maneira que escolher. Por exemplo, um aplicativo de email pode usar "the title " como o assunto do email e usado "the" text como o corpo do email.

Compartilhamento de arquivos

A navigator.share função também aceita uma files matriz para compartilhar arquivos com outros aplicativos.

É importante testar se o compartilhamento de arquivos é compatível com o navegador antes de compartilhá-los. Para marcar se há suporte para o compartilhamento de arquivos, use a navigator.canShare função:

function shareSomeFiles(files) {
  if (navigator.canShare && navigator.canShare({files})) {
    console.log('Sharing files is supported');
  } else {
    console.error('Sharing files is not supported');
  }
}

O files membro do objeto de compartilhamento deve ser uma matriz de File objetos. Saiba mais sobre a interface de Arquivo.

Uma maneira de construir File objetos é:

1. Primeiro, use a fetch API para solicitar um recurso.
2. Em seguida, use a resposta retornada para criar um novo Filearquivo .

Essa abordagem é mostrada abaixo.

async function getImageFileFromURL(imageURL, title) {
  const response = await fetch(imageURL);
  const blob = await response.blob();
  return new File([blob], title, {type: blob.type});
}

No código acima:

1. A getImageFileFromURL função busca uma imagem usando uma URL.
2. A response.blob() função converte a imagem em um BLOB (objeto binário grande).
3. O código cria um File objeto usando o BLOB.

Demonstração de compartilhamento de conteúdo

PWAmp é um PWA de demonstração que usa a navigator.share função para compartilhar texto e links.

Para testar o recurso de Compartilhamento:

1. Vá para PWAmp.

2. No lado direito da barra de endereços, clique no aplicativo disponível. Instalar () para instalar o PWAmp como um PWA.

3. No PWAmp PWA instalado, importe um arquivo de áudio local (arrastando-o para a janela do aplicativo). Por exemplo, se você clonou o repositório MicrosoftEdge / Demos , terá uma cópia local dos .mp3 arquivos no diretório /pwamp/songs/ , como C:\Users\localAccount\GitHub\Demos\pwamp\songs\.

4. Ao lado da música recém-importada, clique no botão Ações da música (...) e selecione Compartilhar. A caixa de diálogo Compartilhar do Windows é exibida:

   

5. Escolha um aplicativo para compartilhar o conteúdo.

Você pode encontrar o código-fonte do PWAmp no GitHub. O aplicativo PWAmp usa a API de Compartilhamento da Web no arquivo de origemapp.js .

Recebendo conteúdo compartilhado

Usando a API de Destino de Compartilhamento da Web , um PWA pode se registrar para ser exibido como um aplicativo na caixa de diálogo de compartilhamento do sistema. O PWA pode então usar a API de Destino de Compartilhamento da Web para lidar com conteúdo compartilhado proveniente de outros aplicativos.

Somente PWAs instalados podem ser registrados como destinos de compartilhamento.

Registrar-se como um destino

Para receber conteúdo compartilhado, a primeira coisa a fazer é registrar seu PWA como um destino de compartilhamento. Para se registrar, use o membro manifesto share_target . Após a instalação do aplicativo, o sistema operacional usa o share_target membro para incluir seu aplicativo na caixa de diálogo compartilhamento do sistema. O sistema operacional sabe o que fazer quando seu aplicativo é escolhido pelo usuário, para compartilhar o 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 código de manifesto:

{
    "share_target": {
        "action": "/handle-shared-content/",
        "method": "GET",
        "params": {
            "title": "title",
            "text": "text",
            "url": "url",
        }
    }
}

Quando seu aplicativo é selecionado pelo usuário como o destino do 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 titleparâmetros , texte url de consulta. A seguinte solicitação é feita: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

Se você tiver um código existente que usa outros nomes de parâmetros de consulta, poderá mapear os parâmetros padrão title, text, e url de consulta para seus outros nomes. No exemplo a seguir, os titleparâmetros , text, e url de consulta são mapeados para subject, body, e address:

{
    "share_target": {
        "action": "/handle-shared-content/",
        "method": "GET",
        "params": {
            "title": "subject",
            "text": "body",
            "url": "address",
        }
    }
}

Lidar com GET dados compartilhados

Para lidar com os dados compartilhados na solicitação GET em seu código PWA, use o URL construtor para extrair os parâmetros de consulta:

window.addEventListener('DOMContentLoaded', () => {
    console url = new URL(window.location);

    const sharedTitle = url.searchParams.get('title');
    const sharedText = url.searchParams.get('text');
    const sharedUrl = url.searchParams.get('url');
});

Lidar com dados compartilhados POST

Se os dados compartilhados tiverem o objetivo de alterar seu aplicativo de alguma forma, como atualizar parte do conteúdo armazenado no aplicativo, você deverá usar o POST método e definir um tipo de codificação com enctype:

{
    "share_target": {
        "action": "/post-shared-content",
        "method": "POST",
        "enctype": "multipart/form-data",
        "params": {
            "title": "title",
            "text": "text",
            "url": "url",
        }
    }
}

A POST solicitação HTTP contém os dados compartilhados, codificados como multipart/form-data. Você pode acessar esses dados no seu servidor HTTP usando o código do lado do servidor, mas isso não funcionará quando o usuário estiver offline. Para proporcionar uma melhor experiência, use um service worker e acesse os dados dele usando um fetch ouvinte de eventos, da seguinte forma:

self.addEventListener('fetch', event => {
    const url = new URL(event.request.url);

    if (event.request.method === 'POST' && url.pathname === '/post-shared-content') {
        event.respondWith((async () => {
            const data = await event.request.formData();

            const title = data.get('title');
            const text = data.get('text');
            const url = data.get('url');

            // Do something with the shared data here.

            return Response.redirect('/content-shared-success', 303);
        })());
    }
});

No código acima:

1. O trabalho de serviço intercepta a POST solicitação.

2. Usa os dados de alguma forma (como para armazenar o conteúdo localmente).

3. Redireciona o usuário para uma página de sucesso. Dessa forma, o aplicativo pode funcionar mesmo se a rede estiver inoperante. O aplicativo pode optar por armazenar o conteúdo apenas localmente ou pode enviar o conteúdo para o servidor mais tarde, quando a conectividade for restaurada (por exemplo, usando a sincronização em segundo plano).

Veja também:

• Sincronizar e atualizar um PWA em segundo plano

Lidar com arquivos compartilhados

Os aplicativos também podem lidar com arquivos compartilhados. Para manipular arquivos em seu PWA, você deve usar o POST método e o multipart/form-data tipo de codificação. Além disso, você deve declarar os tipos de arquivos que seu aplicativo pode manipular.

{
    "share_target": {
        "action": "/store-code-snippet",
        "method": "POST",
        "enctype": "multipart/form-data",
        "params": {
            "title": "title",
            "files": [
                {
                    "name": "textFile",
                    "accept": ["text/plain", "text/html", "text/css", 
                               "text/javascript"]
                }
            ]
        }
    }
}

O código de manifesto acima informa ao sistema que seu aplicativo pode aceitar arquivos de texto com vários tipos MIME. Extensões de nome de arquivo, como .txt, também podem ser passadas na accept matriz.

Para acessar o arquivo compartilhado, use a solicitação formData como antes e use um FileReader para ler o conteúdo, da seguinte maneira:

self.addEventListener('fetch', event => {
    const url = new URL(event.request.url);

    if (event.request.method === 'POST' && url.pathname === '/store-code-snippet') {
        event.respondWith((async () => {
            const data = await event.request.formData();

            const filename = data.get('title');
            const file = data.get('textFile');

            const reader = new FileReader();
            reader.onload = function(e) {
                const textContent = e.target.result;

                // Do something with the textContent here.

            };
            reader.readAsText(file);

            return Response.redirect('/snippet-stored-success', 303);
        })());
    }
});

Confira também

• Sincronizar e atualizar um PWA em segundo plano

MDN:

• API de Compartilhamento da Web
• share_target membro de manifesto.
• Prometo
• Interface de arquivos

W3C:

• Destino de Compartilhamento da Web

Demonstração do PWAmp:

• MicrosoftEdge / Demos repo.
• PWAmp - página da web do aplicativo ao vivo.
  • Código-fonte do PWAmp
  • Diretório /pwamp/songs/
  • app.js - um uso da API do Web Share.