Partilhar conteúdo com outras aplicações

A partilha de conteúdos entre aplicações tornou-se popular por dispositivos móveis em que manipular ficheiros ou copiar conteúdo é menos intuitivo do que nos sistemas operativos de ambiente de trabalho. Por exemplo, em dispositivos móveis, é comum partilhar uma imagem com um amigo ao enviar uma mensagem SMS. No entanto, a partilha de conteúdos não está reservada a dispositivos móveis; também é possível partilhar entre aplicações no Windows.

Existem duas direções para partilhar conteúdo e ambas as direções podem ser processadas por Aplicações Web Progressivas (PWAs):

As PWAs que se registam como destinos de partilha sentem-se nativamente integradas no SO e são mais envolventes para os utilizadores.

Compartilhando conteúdo

As PWAs podem utilizar a API de Partilha Web para acionar a apresentação da caixa de diálogo de partilha do sistema operativo.

Para partilhar conteúdos como ligações, texto ou ficheiros, utilize 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 partilhado.
• text: uma descrição mais longa para o conteúdo partilhado.
• url: o endereço de um recurso a ser partilhado.
• files: uma matriz de ficheiros a partilhar.

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, verificamos primeiro se o browser suporta a partilha na Web ao testar se navigator.share está definido. A navigator.share função devolve um objeto Promise que é resolvido quando a partilha é bem-sucedida e rejeita quando ocorreu um erro.

Uma vez que uma Promessa é utilizada aqui, o código acima pode ser reescrito como uma função async , da seguinte forma:

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 irá acionar a caixa de diálogo de partilha, permitindo ao utilizador escolher uma aplicação para receber o conteúdo partilhado. A caixa de diálogo de partilha é apresentada abaixo:

Assim que o utilizador tiver selecionado uma aplicação para receber o conteúdo partilhado, cabe a esta aplicação processá-la da forma que preferir. Por exemplo, uma aplicação de e-mail pode utilizar o title como assunto do e-mail e utilizar o text como corpo do e-mail.

Partilhar ficheiros

A navigator.share função também aceita uma files matriz para partilhar ficheiros com outras aplicações.

É importante testar se a partilha de ficheiros é suportada pelo browser antes de os partilhar. Para verificar se a partilha de ficheiros é suportada, utilize 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 partilha tem de ser uma matriz de File objetos. Saiba mais sobre a Interface de ficheiro.

Uma forma de construir File objetos é:

1. Primeiro, utilize a fetch API para pedir um recurso.
2. Em seguida, utilize a resposta devolvida para criar um novo File.

Esta abordagem é apresentada 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 obtém uma imagem com um URL.
2. A response.blob() função converte a imagem num objeto binário grande (BLOB).
3. O código cria um File objeto com o BLOB.

Demonstração da partilha de conteúdo

PWAmp é um PWA de demonstração que utiliza a navigator.share função para partilhar texto e ligações.

Para testar a funcionalidade Partilha:

1. Aceda a PWAmp.

2. No lado direito da Barra de endereço, clique na Aplicação disponível. Botão Instalar () para instalar o PWAmp como um PWA.

3. No PWA PWAmp instalado, importe um ficheiro de áudio local (arrastando-o para a janela da aplicação). Por exemplo, se clonou o repositório MicrosoftEdge/Demos , tem uma cópia local dos .mp3 ficheiros no diretório (Demos repo > pwamp/songs), como C:\Users\username\GitHub\Demos\pwamp\songs.

4. Junto à música recentemente importada, clique no botão Ações da música (...) e, em seguida, selecione Partilhar. É apresentada a caixa de diálogo Partilha do Windows:

   

5. Escolha uma aplicação na qual pretende partilhar o conteúdo.

Pode encontrar o código fonte PWAmp no GitHub. A aplicação PWAmp utiliza a API de Partilha Web no ficheiro de origem app.js .

Receber conteúdo partilhado

Ao utilizar a API de Destino da Partilha Web , um PWA pode registar-se para ser apresentado como uma aplicação na caixa de diálogo de partilha do sistema. Em seguida, o PWA pode utilizar a API de Destino da Partilha Web para processar conteúdos partilhados provenientes de outras aplicações.

Registar-se como um destino

Para receber conteúdo partilhado, a primeira coisa a fazer é registar o seu PWA como um destino de partilha. Para se registar, utilize o membro do share_target manifesto. Após a instalação da sua aplicação, o sistema operativo utiliza o share_target membro para incluir a sua aplicação na caixa de diálogo de partilha do sistema. O sistema operativo sabe o que fazer quando a aplicação é escolhida pelo utilizador para partilhar o conteúdo.

O share_target membro tem de conter as informações necessárias para que o sistema transmita o conteúdo partilhado para a sua aplicação. Considere o seguinte código de manifesto:

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

Quando a aplicação é selecionada pelo utilizador como o destino do conteúdo partilhado, o PWA é iniciado. É feito um GET pedido HTTP ao URL especificado pela action propriedade . Os dados partilhados são transmitidos como os titleparâmetros de consulta , texte url . É feito o seguinte pedido: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

Se tiver código existente que utiliza outros nomes de parâmetros de consulta, pode mapear os parâmetros predefinidos title, texte url de consulta para os outros nomes. No exemplo seguinte, os titleparâmetros de consulta , texte url são mapeados para subject, bodye address:

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

Processar dados partilhados GET

Para processar os dados partilhados através do pedido GET no código PWA, utilize 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');
});

Processar dados partilhados post

Se os dados partilhados se destinarem a alterar a sua aplicação de alguma forma, tal como ao atualizar alguns dos conteúdos armazenados na aplicação, tem de utilizar 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",
        }
    }
}

O POST pedido HTTP contém os dados partilhados, codificados como multipart/form-data. Pode aceder a estes dados no servidor HTTP através do código do lado do servidor, mas isto não funcionará quando o utilizador estiver offline. Para proporcionar uma melhor experiência, utilize uma função de trabalho de serviço e aceda aos dados da função de trabalho de serviço através de um fetch serviço de escuta 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. A função de trabalho de serviço interceta o POST pedido.

2. Utiliza os dados de alguma forma (por exemplo, para armazenar o conteúdo localmente).

3. Redireciona o utilizador para uma página de êxito. Desta forma, a aplicação pode funcionar mesmo que a rede esteja inativa. A aplicação pode optar por armazenar apenas o conteúdo localmente ou pode enviar o conteúdo para o servidor mais tarde, quando a conectividade for restaurada (por exemplo, através da Sincronização de Fundo).

Processar ficheiros partilhados

As aplicações também podem processar ficheiros partilhados. Para processar ficheiros no seu PWA, tem de utilizar o POST método e o multipart/form-data tipo de codificação. Além disso, tem de declarar os tipos de ficheiros que a sua aplicação pode processar.

{
    "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 indica ao sistema que a sua aplicação pode aceitar ficheiros de texto com vários tipos de MIME. As extensões de nome de ficheiro, como .txt, também podem ser transmitidas na accept matriz.

Para aceder ao ficheiro partilhado, utilize o pedido formData como anteriormente e utilize um FileReader para ler o conteúdo, da seguinte forma:

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

• Integrar com a IU de partilha do SO com a API de Partilha Web
• Receber dados partilhados com a API de Destino da Partilha Web