Integre com a IU de compartilhamento do sistema operacional através da API Web Share
Aplicações Web podem usar os mesmos recursos de compartilhamento fornecidos pelo sistema que as aplicações específicas da plataforma.
Com a API Web Share, as aplicações web podem usar os mesmos recursos de compartilhamento fornecidos pelo sistema que aqueles usados pelas aplicações específicas da plataforma. A API Web Share torna possível para aplicações web compartilharem links, texto e arquivos com outras aplicações instaladas no dispositivo da mesma forma que aplicações específicas da plataforma.
Conceitos e uso #
Capacidades e limitações #
A Web Share tem os seguintes recursos e limitações:
- Só pode ser usado em um site acessado via HTTPS.
- Precisa ser invocado em resposta a uma ação do usuário, como um clique. Invocá-lo por meio do
onloadé impossível. - Pode compartilhar, URLs, texto ou arquivos.
- Em janeiro de 2021, ele estava disponível nos forks do Safari, Android em Chromium, ChromeOS e Chrome no Windows. O Chrome no MacOS ainda está em desenvolvimento. Consulte MDN para obter detalhes.
Compartilhando links e texto #
Para compartilhar links e texto, use o método share(), que é um método baseado em promessa com um objeto properties obrigatório. Para evitar que o navegador lance um TypeError, o objeto deve conter pelo menos uma das seguintes propriedades: title, text, url ou files. Você pode, por exemplo, compartilhar texto sem uma URL ou vice-versa. Permitir todos os três membros aumenta a flexibilidade dos casos de uso. Imagine se depois de executar o código abaixo, o usuário escolhesse um aplicativo de e-mail como destino. O title poderia ser o assunto do email, o text, o corpo da mensagem e os arquivos, os anexos.
if (navigator.share) {
navigator.share({
title: 'web.dev',
text: 'Check out web.dev.',
url: 'https://web.dev/',
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
}Se o seu site tiver múltiplas URLs para o mesmo conteúdo, compartilhe a URL canônica da página em vez da URL atual. Em vez de compartilhar document.location.href , você deve verificar se há uma tag <meta> <head> e compartilhá-la. Isto proporcionará uma melhor experiência ao usuário. Não apenas evita redirecionamentos, mas também garante que uma URL compartilhada forneça a experiência de usuário correta para um cliente específico. Por exemplo, se um amigo compartilha uma URL móvel e você a visualiza num computador desktop, você verá uma versão desktop:
let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
url = canonicalElement.href;
}
navigator.share({url});Compartilhando arquivos #
Para compartilhar arquivos, primeiro teste e chame navigator.canShare(). Em seguida, inclua um array de arquivos na chamada a navigator.share():
if (navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share({
files: filesArray,
title: 'Vacation Pictures',
text: 'Photos from September 27 to October 14.',
})
.then(() => console.log('Share was successful.'))
.catch((error) => console.log('Sharing failed', error));
} else {
console.log(`Your system doesn't support sharing files.`);
}Observe que o exemplo lida com a detecção de recursos testando navigator.canShare() em vez de navigator.share(). O objeto de dados passado para canShare() suporta apenas a propriedade de files. Arquivos de imagem, vídeo, áudio e texto podem ser compartilhados. (VEJA Extensões de arquivo permitidas no Chromium.) Mais tipos de arquivo podem ser adicionados no futuro.
Estudo de caso do Santa Tracker (Siga o Papai Noel) #
O Santa Tracker, um projeto de código aberto, é uma tradição de férias no Google. Todo mês de dezembro, você pode comemorar a temporada com jogos e experiências educacionais.
Em 2016, a equipe do Santa Tracker usou a API Web Share no Android. Esta API foi uma solução perfeita para dispositivos móveis. Em anos anteriores, a equipe removeu os botões de compartilhamento no celular porque o espaço é reduzido e eles não podiam justificar ter vários alvos de compartilhamento.
Mas com a API Web Share, eles puderam apresentar um botão, economizando pixels preciosos. Eles também descobriram que os usuários compartilhavam com o Web Share cerca de 20% a mais do que os usuários sem a API habilitada. Acesse o Santa Tracker para ver o Web Share em ação.
Suporte dos navegadores #
O suporte do navegador para a API Web Share tem nuances e é recomendável usar a detecção de recursos (conforme descrito nos exemplos de código anteriores) em vez de presumir que um método específico seja totalmente suportado.
Desde o início de 2021, o uso da API para compartilhar títulos, textos e URLs é suportado por:
- Safari 12 ou posterior no macOS e iOS.
- Chrome 75 ou posterior no Android e 89 ou posterior no ChromeOS e Windows.
O uso da API para compartilhar arquivos é compatível com:
- Safari 15 ou posterior no macOS e iOS.
- Chrome 75 ou posterior no Android e 89 ou posterior no ChromeOS e Windows.
(A maioria dos navegadores baseados em Chromium, como o Edge, tem o mesmo suporte para esse recurso que a versão correspondente do Chrome.)
Mostre seu apoio à API #
Você está planejando usar a API Web Share? Seu apoio público ajuda a equipe do Chromium a priorizar os recursos e mostra a outros fornecedores de navegadores como o apoio é fundamental.
Envie um tweet para @ChromiumDev usando a hashtag #WebShare e diga-nos onde e como você está usando a API.