Botão compartilhar Nativo no Mobile

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 #

Selecionador de destino de compartilhamento no nível do sistema com um PWA instalado como opção.
Selecionador de destino de compartilhamento no nível do sistema com um PWA instalado como opção.

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.

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: titletexturlou 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 aplicativo Santa Tracker mostrando um botão de compartilhamento.
Botão de compartilhamento 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.

Demonstrações de compartilhamento na Web

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Estou pronto para lhe atender

MARREIRA DIGITAL © 2021. Todos os direitos reservados

Me ligue ou manda um zap ae!

(92) 982195748

QR Code https://api.whatsapp.com/send?phone=5592982195748

Link direto para meu WhatsApp