Com a API de compartilhamento da Web, os aplicativos da Web podem usar os mesmos recursos de compartilhamento fornecidos pelo sistema dos aplicativos nativos. A API de compartilhamento da Web permite que aplicativos da Web compartilhem links, texto e arquivos com outros aplicativos instalados no dispositivo da mesma maneira que os aplicativos nativos.
Conceitos e uso #
Recursos e limitações
O compartilhamento da Web possui os seguintes recursos e limitações:
- Só pode ser usado em um site que suporte HTTPS.
- Ele deve ser chamado em resposta a uma ação do usuário, como um clique. Invocá-lo através do
onloadmanipulador é impossível. - Pode compartilhar, URLs, texto ou arquivos.
- A partir de meados de 2020, ele está disponível apenas no Safari e no Android nos garfos Chromium. Veja MDN para detalhes.
Compartilhando links e texto
Para compartilhar links e texto, use o share()método, que é um método baseado em promessa com um objeto de propriedades necessário. Para manter o navegador de jogar um TypeError, o objeto deve conter pelo menos uma das seguintes propriedades: title, text, urlou files. Você pode, por exemplo, compartilhar texto sem um URL ou vice-versa. A permissão dos três membros expande a flexibilidade dos casos de uso. Imagine se, depois de executar o código abaixo, o usuário escolher um aplicativo de email como destino. O titleparâmetro pode se tornar o assunto do email 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 vários URLs para o mesmo conteúdo, compartilhe o URL canônico da página em vez do URL atual. Em vez de compartilhar document.location.href, você procuraria uma <meta>tag de URL canônica na página <head>e a compartilharia. Isso proporcionará uma melhor experiência ao usuário. Além de evitar redirecionamentos, também garante que um URL compartilhado sirva a experiência correta do usuário para um cliente específico. Por exemplo, se um amigo compartilhar um URL para celular e você o observar em um computador desktop, você verá uma versão para desktop:
let url = document.location.href;const canonicalElement = document.querySelector('link[rel=canonical]');if (canonicalElement !== null) { url = canonicalElement.href;}navigator.share({url: url});Compartilhando arquivos
Para compartilhar arquivos, primeiro teste e ligue navigator.canShare(). Em seguida, inclua uma matriz de arquivos na chamada para 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 a amostra lida com a detecção de recursos testando em naviagator.canShare()vez de para navigator.share(). O objeto de dados passado para canShare()suporta apenas a filespropriedade. Arquivos de imagem, vídeo, áudio e texto podem ser compartilhados. (Consulte Extensões de arquivo permitidas no Chromium .) Mais tipos de arquivos podem ser adicionados no futuro.
Estudo de caso do Santa Tracker #
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 de compartilhamento da Web no Android. Essa API era perfeita para dispositivos móveis. Nos anos anteriores, a equipe desativou os botões de compartilhamento no celular porque o espaço é escasso e não justificava ter vários destinos de compartilhamento.
Mas com a API de compartilhamento na Web, eles conseguiram apresentar apenas 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 ativada. Vá para o Santa Tracker para ver o Web Share em ação.