Simplificação do compartilhamento em dispositivos móveis e computadores com a API Web Share Target
Em um dispositivo móvel ou computador, o compartilhamento deve ser tão simples quanto clicar no botão Compartilhar, escolher um aplicativo e escolher com quem. Por exemplo, você pode compartilhar um artigo interessante, seja por e-mail para amigos ou twittando para o mundo.
Antes, apenas apps específicos da plataforma podiam se registrar no sistema operacional para receber compartilhamentos de outros apps instalados. No entanto, com a API Web Share Target, os apps da Web instalados podem ser registrados no sistema operacional subjacente como um alvo de compartilhamento para receber conteúdo compartilhado.
Veja o destino de compartilhamento da Web em ação
- Usando o Chrome 76 ou posterior para Android ou o Chrome 89 ou posterior no computador, abra a demonstração do Destino do compartilhamento da Web.
- Quando solicitado, clique em Instalar para adicionar o app à sua tela inicial ou use o menu do Google Chrome para adicioná-lo à sua tela inicial.
- Abra qualquer app compatível com o compartilhamento ou use o botão "Compartilhar" no app de demonstração.
- No seletor de segmentações, escolha Web Share Test.
Depois de compartilhar, você verá todas as informações compartilhadas no app da Web de destino.
Registrar o app como um alvo de compartilhamento
Para registrar seu app como um alvo de compartilhamento, ele precisa atender aos critérios de instalação do Chrome. Além disso, antes que um usuário possa compartilhar com seu app, ele precisa adicioná-lo à tela inicial. Isso evita que os sites se adicionem aleatoriamente ao seletor de intent de compartilhamento do usuário e garante que esse compartilhamento seja algo que os usuários querem fazer com seu app.
Atualizar o manifesto do app da Web
Para registrar seu app como um alvo de compartilhamento, adicione uma entrada share_target
ao manifesto do app da Web. Isso instrui o sistema operacional a incluir seu app como
uma opção no seletor de intents. O que você adiciona ao manifesto controla os dados
que seu app aceita. Há três cenários comuns para a entrada
share_target
:
- Como aceitar informações básicas
- Aceitar mudanças no aplicativo
- Aceitando arquivos
Como aceitar informações básicas
Se o app de destino estiver apenas aceitando informações básicas, como dados, links
e texto, adicione o código abaixo ao arquivo manifest.json
:
"share_target": {
"action": "/share-target/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
Se o aplicativo já tiver um esquema de URL de compartilhamento, substitua os valores params
pelos parâmetros de consulta existentes. Por exemplo, se o esquema de URL de compartilhamento usa body
em vez de text
, substitua "text": "text"
por "text":
"body"
.
Se não for fornecido, o valor padrão de method
será "GET"
. O campo enctype
, não
mostrado neste exemplo, indica o tipo de codificação dos dados.
Para o método "GET"
, enctype
é definido como "application/x-www-form-urlencoded"
por padrão e
é ignorado se estiver definido como algo diferente.
Aceitar mudanças no aplicativo
Se os dados compartilhados mudarem o app de destino de alguma forma, por exemplo, salvando um
favorito no aplicativo de destino, defina o valor method
como "POST"
e inclua
o campo enctype
. O exemplo abaixo cria um favorito no app de destino,
para que ele use "POST"
para method
e "multipart/form-data"
para
enctype
:
{
"name": "Bookmark",
"share_target": {
"action": "/bookmark",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
Aceitando arquivos
Assim como acontece nas mudanças do aplicativo, para aceitar arquivos, é necessário que method
seja "POST"
e que o enctype
esteja presente. Além disso, enctype
precisa ser
"multipart/form-data"
e uma entrada files
precisa ser adicionada.
Também é necessário adicionar uma matriz files
que define os tipos de arquivos aceitos pelo app. Os elementos da matriz são entradas com dois membros: um campo name
e um campo accept
. O campo accept
usa um tipo MIME, uma extensão de arquivo ou uma matriz que contenha ambos. É melhor fornecer uma matriz que inclua um
tipo MIME e uma extensão de arquivo, já que os sistemas operacionais são diferentes
de acordo com a preferência.
{
"name": "Aggregator",
"share_target": {
"action": "/cgi-bin/aggregate",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"url": "link",
"files": [
{
"name": "records",
"accept": ["text/csv", ".csv"]
},
{
"name": "graphs",
"accept": "image/svg+xml"
}
]
}
}
}
Processar o conteúdo recebido
Você decide como lidar com os dados compartilhados recebidos e depende do seu app. Por exemplo:
- Um cliente de e-mail poderia elaborar um novo e-mail usando
title
como o assunto, comtext
eurl
concatenados como o corpo. - Um app de rede social pode criar uma nova postagem ignorando
title
, usandotext
como o corpo da mensagem e adicionandourl
como um link. Setext
estiver ausente, o app também poderá usarurl
no corpo. Seurl
estiver ausente, o app poderá verificartext
procurando um URL e adicioná-lo como um link. - Um app de compartilhamento de fotos pode criar uma nova apresentação de slides usando
title
como título da apresentação,text
como descrição efiles
como imagens da apresentação de slides. - Um app de mensagens de texto pode criar uma nova mensagem usando
text
eurl
concatenados juntos e soltandotitle
.
Processando compartilhamentos GET
Se o usuário selecionar seu aplicativo e method
for "GET"
(o
padrão), o navegador abrirá uma nova janela no URL action
. Em seguida, o navegador gera uma string de consulta usando os valores codificados de URL fornecidos no manifesto.
Por exemplo, se o app de compartilhamento fornecer title
e text
, a string de consulta será
?title=hello&text=world
. Para processar isso, use um listener de eventos DOMContentLoaded
na página de primeiro plano e analise a string de consulta:
window.addEventListener('DOMContentLoaded', () => {
const parsedUrl = new URL(window.location);
// searchParams.get() will properly handle decoding the values.
console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});
Use um service worker para pré-armazenar em cache a página action
para que ela carregue rapidamente e funcione de maneira confiável, mesmo que o usuário esteja off-line.
O Workbox é uma ferramenta que ajuda a
implementar o pré-armazenamento em cache no service worker.
Processando compartilhamentos POST
Se a method
for "POST"
, como seria se o app de destino aceitasse um favorito salvo
ou arquivos compartilhados, o corpo da solicitação POST
recebida vai conter
os dados transmitidos pelo app de compartilhamento, codificados usando o valor enctype
fornecido no manifesto.
A página de primeiro plano não pode processar esses dados diretamente. Como a página vê os dados como uma solicitação, ela os transmite ao service worker, que pode interceptá-los com um listener de eventos fetch
. Aqui, é possível transmitir os dados de volta para a página
de primeiro plano usando postMessage()
ou transmiti-los para o servidor:
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
// If this is an incoming POST request for the
// registered "action" URL, respond to it.
if (event.request.method === 'POST' &&
url.pathname === '/bookmark') {
event.respondWith((async () => {
const formData = await event.request.formData();
const link = formData.get('link') || '';
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})());
}
});
Como verificar conteúdo compartilhado
Verifique os dados recebidos. Infelizmente, não há garantia de que outros apps compartilharão o conteúdo adequado no parâmetro correto.
Por exemplo, no Android, o campo url
vai ficar vazio porque
não é compatível com o sistema de compartilhamento do Android. Em vez disso, os URLs vão aparecer no campo text
ou, às vezes, no campo title
.
Suporte ao navegador
Há suporte para a API Web Share Target, conforme descrito abaixo:
Em todas as plataformas, seu app da Web precisa ser instalado antes de aparecer como um possível destino para receber dados compartilhados.
Aplicativos de amostra
- Squoosh (em inglês)
- PWA do mural
Mostrar suporte à API
Você planeja usar a API Web Share Target? Seu suporte público ajuda a equipe do Chromium a priorizar recursos e mostra a outros fornecedores de navegador como é fundamental oferecer suporte a eles.
Envie um tweet para @ChromiumDev com a hashtag
#WebShareTarget
e conte para a gente onde e como você está usando a hashtag.