Conteúdo:
Contexto/Problema
Sabe quando entramos em algum app e tem funções de compartilhar informações - via Whatsapp, Telegram, e-mail, direct do Instagram, e diversos outros apps que podem receber essa informação de alguma forma - e aparece aquela telinha para voce escolher para qual outro app você quer compartilhar?
Tipo dessa forma aqui que tem no app do Twitter, por exemplo.
Normalmente para websites, vemos mais os botões de compartilhar em alguma área específica da tela que já nos redirecionam para onde queremos compartilhar, de forma meio limitada.
Tipo esses:
O que é tranquilo, mas quando vamos para a versão web no celular as opções de compartilhamento se mantem lá em algum canto da tela, com as opções que o próprio site dá. E só se você for no app é que vai conseghuir ter aquele experiência que mostrei lá em cima como exemplo.
Poxa... Seria massa se no meu website ou minha aplicação web pudesse entregar pra pessoa a mesma experiência de um app na parte de compartilhar né?
A solução
Usando a Web Share API podemos colocar no nosso website ou aplicação web a funcionalidade de compartilhar o conteúdo usando o compartilhamento nativo do dispositivo (que vai dar as opções para onde se deseja compartilhar).
Para isso usamos o objeto navigator que nele podem ser acessadas informações sobre o browser. Usando o método share() do objeto navigator podemos passar as informações para que o conteúdo seja compartilhado.
navigator.share({
title: 'Blog - Talita Oliveira',
text: 'Veja mais posts no blog.',
url: 'http://blog.talitaoliveira.com.br/',
})
Para o share() passamos um objeto que precisa ter pelo menos uma dessas propriedades:
- title: Um simples título (se for compartilhado via email, esse title aparece no assunto do email)
- text: Esse texto vai junto com a url no momento de compartilhar
- url: A URL que deseja compartilhar
O retorno do método share() é uma promisse.
=== ⭐️ ===
"Algum dia vou explicar sobre promisse no blog"
Essa frase acima é uma promisse(uma promessa~) então nesse caso, vocês vão ficar aguardando essa promessa finalizar pra então ler o artigo. 😅😅😅 ~~(que merda, Talita)~~
=== ⭐️ ===
No exemplo abaixo o navigator.share() vai ser chamado quando houver o clique em algum botão (que é o que geralmente acontece)de compartilhar e vai ser responsável por chamar o compartilhamento nativo do dispositivo.
Tenho:
- Um botão, que pego do HTML
- Que ao ser clicado, vai ser verificado se podemos usar o
navigator.share - Caso sim, usamos a função
navigator.share() - Após terminar o compartilhamento, mostro no console a mensagem "Compartilhado com Sucesso" no
then - Caso dê algum erro no momento de compartilhar, entra no
catch
const btnShare = document.getElementById("btn-compartilhar")
btnShare.addEventListener("click", () => {
if(navigator.share) {
navigator.share({
title: 'Blog - Talita Oliveira',
text: 'Veja mais posts no blog.',
url: 'http://blog.talitaoliveira.com.br/',
})
.then(() => console.log('Compartilhado com Sucesso'))
.catch((error) => console.log('Erro ao compartilhar', error));
}else{
alert("Navigator.share não disponível, tenta num celular :)")
}
})
Obs: Esse código não é o mais bonito do mundo, foi mais para exemplificar.
E aqui foi um exemplo que fiz direto no meu blog, você pode conferir aqui na página about.
A minha ideia é colocar ele nos posts... Vai rolar, primeiro tinha que testar a funcionalidade e deixar os componentes prontos para poder usar e adaptar para pagina de posts. Vai rolar...
Posso usar?
Infelizmente, não são em todos os navegadores que isso funciona. Aqui em casa testei no celular da minha irmã que é um Xiomi, e testei no "Mi Browser" e infelizmente não pega.
Fiz um código avulso pra poder testar a funcionalidade: https://talitaoliveira.com.br/lab/web-share-api/
Olhando no site https://caniuse.com/ procurei por essa funcionalidade e ela ainda não tem muita compatibilidade.
E tem um aviso que essa feature ainda está em fase experimental. O que precisa ter cautela ao usar em ambiente de produção.
Minha Reflexão
A motivação de procurar por essa funcionalidade foi a partir de uma sugestão no projeto que estou. Eu gosto muito de assuntos relacionados a PWA, eu já estudei sobre web apps por um bom tempo mas com o tempo bateu desanimo pois eu não conseguia aplicar em nada da vida real e parei de estudar. Espero voltar a estudar com mais animo agora.
Eu era o tipo de pessoa que pregava a palavra do PWA pois acho uma coisa sensacional (mas não tinha muuuuita experiencia). Adorava discutir sobre PWA, e ver o que dava pra fazer. Mas as coisas que eu fazia profissionalmente, nunca tinham muito a ver com o assunto e eu ficava até sem animo pra estudar por mim mesma, não que uma coisa exclua a outra mas foi assim comigo. Mas eu sempre saia tentando ir atras de empresas ou projetos que me deixasse um pouco próxima dessas coisas.
Eu era do PHP e mudei pro Javascript justamente nessa época. Deixei de ir pra uma empresa trabalhar com PHP e ganhar mais do que eu ganhava e fui pra outra ganhar um pouco menos do que eu já ganhava mas iria ter a experiencia que eu queria com JS.
~🌟~
É isso aí galera!
Espero que tenha sido útil pra alguém.
Pra mim foi uma coisa totalmente nova e foi um estudo massa.
Até a próxima. 🤙🏽
Referências
Documentação no W3C: https://w3c.github.io/web-share/
https://labs.thisdot.co/share-in-a-pwa-like-a-native-app-using-the-web-share-api
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
Can I Use: https://caniuse.com/#search=navigator API share