Web Share API: Compartilhando de forma nativa no browser

javascript Set 24, 2019

Eu estava lendo alguns artigos na web e me deparei com algo muito interessante, e achei que deveria compartilhar com você.

Agora, no Chrome 61 para Android, temos uma nova API chamada Web Share disponível. Essa API nos permite ativar a barra de compartilhamento nativa do Android via JavaScript, oferecendo maiores possibilidades ao compartilhar um URL ou texto.

Artigo no site do Google Developers.

Um pouco de história…

A API de compartilhamento da Web foi originalmente lançada como uma avaliação de origem no Chrome 55.

Os testes de origem são uma abordagem para permitir um ambiente experimental seguro para os recursos da plataforma web.

Antes da API, havia várias maneiras de chamar os recursos de compartilhamento nativo na plataforma, mas todos eles tinham desvantagens significativas:

  • Web Intents (descontinuado)
  • Manipulação de protocolo via registerProtocolHandler (sem suporte móvel)
  • Compartilhamento direto para um URL conhecido como Facebook ou Twitter
  • Android Intents (somente Android e inscrição obrigatória no aplicativo)

Por que isso é beneficial para a web?

Em 2016, o Google experimentou a API e chegou à conclusão de que a nova API era perfeita para dispositivos móveis, pois eles só podiam usar 1 botão em vez de uma lista de botões sociais, economizando alguns pixels na página (que são preciosos).

Com a nova API, eles também notaram um aumento de 20% no número de pessoas que compartilham a página em comparação com as pessoas que usam métodos tradicionais.

Na minha opinião, isso também aproxima a Web de uma experiência nativa, usando menos código e proporcionando uma melhor experiência ao usuário.

Já podemos usar?

Sim! já podemos usá-la, basta seguir algumas regras de uso da API:

  • A API aceita um objeto, no qual você precisa passar pelo menos a propriedade text ou url.
  • Você deve estar usando HTTPS
  • Você só pode chamar a API por meio de uma ação do usuário, como um evento de clique (mas não pode chamar o evento onload)
  • Você pode compartilhar qualquer URL, não apenas os URLs de escopo do seu site.
  • Você também pode compartilhar apenas texto, o URL não é necessário.
  • Você precisa destacar a detecção para ver se está disponível em sua plataforma (por exemplo, navigator.share! == indefinido)

Aqui está um exemplo de como você pode usá-lo em sua página:

if (navigator.share) {
  navigator.share({
    title: 'Rafael Fragoso',
    text: 'Esse blog é muito bom!',
    url: 'https://rafaelfragoso.com/',
  })
  .then(() => console.log ('Compartilhamento bem sucedido'))
  .catch((error) => console.log ('Erro ao compartilhar', error))
} else {
  // fallback para algum plugin
}

Muito simples, certo?

Resumindo

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

Agora eu quero saber sobre você! Você já está usando a API? Você gostaria de usar? Algum caso de uso bem-sucedido? Ou apenas quer deixar uma opinião?

Deixe um comentário abaixo e vamos conversar!

Rafael Fragoso

Eu estou no mercado há um pouco mais de 10 anos. Hoje eu trabalho remoto, para uma empresa chamada BairesDev e crio conteúdo relacionado a desenvolvimento de software.