/ HTML, JAVASCRIPT

Web Share API: Compartilhando de forma nativa no browser

Eu estava lendo alguns artigos na web e esbarrei numa coisa muito interessante, e achei que deveria compartilhar com vocês.

Agora, a partir do Chrome 61 para Android, temos disponível uma nova API chamada de Web Share. Essa API nos possibilita ativar a barra de compartilhamento nativa do Android via JavaScript, nos dando maiores possibilidades na hora de compartilhar uma URL ou texto.

Leia o artigo original do Google Developers aqui.

Um pouco de história…

A Web Share API foi originalmente lançada como um ‘Origin Trial’ no Chrome 55.

Origin trials são uma abordagem para ativar um ambiente seguro de experimentos para features da plataforma web.

Antes da API, houveram várias maneiras de invocar recursos de compartilhamento nativo na plataforma, mas todos eles têm desvantagens significativas:

  • Web Intents (descontinuado)
  • Protocol handling via registerProtocolHandler (Sem suporte para mobile)
  • Compartilhamento direto para uma URL conhecida, como Facebook ou Twitter
  • Android intents (Android only e exigiam opt-in dos apps)

Por que isso é beneficial para a web?

Em 2016 o Google fez um experimento com a API e chegaram a conclusão de que a nova API era perfeita para dispositivos móveis, pois eles poderiam apenas usar 1 botão em vez de uma lista de botões de redes sociais, economizando alguns pixels na página (que são preciosos).

Com a nova API eles também notaram um aumento de 20% das pessoas que compartilhavam a página, comparado com as pessoas que usavam os métodos tradicionais.

Na minha opinião, isso também deixa a Web mais perto de uma experiência nativa, usando menos código e entregando uma melhor experiência para o usuário.

Já podemos usar?

Sim! já podemos usar, basta seguir algumas regras de uso da API:

  • A API aceita um objeto, onde você precisa passar pelo menos a propriedade text ou url
  • Você precisar estar usando HTTPS
  • Você apenas pode invocar a API por meio de uma ação do usuário, como um evento click (mas você não pode chamar no evento onload)
  • Você pode compartilhar qualquer URL, não apenas as URLs do escopo do seu site
  • Você também pode compartilhar apenas texto, a URL não é obrigatória.
  • Você precisa fazer ‘feature detection’ para ver se está disponível na sua plataforma (Ex.: navigator.share !== undefined)

Aqui um exemplo de como você poderia usar na sua página:

if (navigator.share) {
  navigator.share({
    title: 'Rafael Fragoso',
    text: 'Olhem o blog fodástico do Rafael Fragoso!',
    url: 'https://rafaelfragosom.github.io/',
  })
  .then(() => console.log('Compartilhamento bem sucedido'))
  .catch((error) => console.log('Erro compartilhando', error));
}

Muito simples, né?

E caso você esteja pensando em usar algum plugin como fallback, você pode usar a lib que desenvolvemos aqui na Globo.com (share-bar):

var btn, sharebar;

function share(e) {
  navigator.share({
    title: 'Rafael Fragoso',
    text: 'Olhem o blog fodástico do Rafael Fragoso!',
    url: 'https://rafaelfragosom.github.io/',
  })
  .then(() => console.log('Compartilhamento bem sucedido'))
  .catch((error) => console.log('Erro compartilhando', error));
}

if (navigator.share) {
  btn = document.querySelector('.seu-botao-de-share');
  btn.addEventListener('click', share);
} else {
  sharebar = new ShareBar();
}

Concluindo

A Web está evoluindo cada vez mais, e estaremos cada vez mais próximos de uma experiência nativa e mais fluida. Isso não é excitante?

Agora eu quero saber de vocês! Vocês já estão usando a API? Gostaríam de usar? Tem algum use-case de sucesso? Ou querem apenas deixar uma opinião?

Deixem um comentário abaixo e vamos bater um papo!