Web Share API

Recentemente, a equipe do Chrome anunciou que um de seus membros, o Matt Giuca, está trabalhando em uma proposta para uma simples API: o Web Share. Esta API permite que websites consigam invocar os recursos de compartilhamento nativos do Sistema Operacional.

Um ponto importante da Web Share API é que o controle de onde e como os dados estão sendo compartilhados fica na mão do usuário.

A partir da versão Beta do Chrome 55 – lançado em outubro de 2016, já é possível testar o Origin Trials, que permite integrar a Web Share API ao seu site. O Origin Trials significa que esta API geralmente não está disponível para todos os sites; em vez disso, você precisa se registrar para ter acesso durante a fase de testes. Durante este período, a API provavelmente vai mudar e pode quebrar de forma inesperada. Por isso, é importante o feedback da comunidade, sempre que possível, para que possam melhorar a API até uma versão completamente estável.

A Web Share API é baseada em uma Promise, com um único método que recebe um objeto com propriedades nomeadas, sendo elas: title, text e url.

Vamos à prática

Segue um exemplo do funcionamento da API:

navigator.share({
  title: document.title,
  text: "BrazilJS é incrível",
  url: window.location.href
})
.then(() => console.log('Compartilhado com sucesso!'))
.catch(() => console.log('Erro ao compartilhar:', error));

Uma vez invocado, o método trará o selecionador nativo e permitirá que você compartilhe os dados com o aplicativo escolhido pelo usuário.

Veja o vídeo de exemplo abaixo:

https://www.youtube.com/watch?v=lhUzYxCvWewA API traz consigo algumas restrições:

  • Seu site precisa estar hospedado em um ambiente seguro (normalmente https);
  • Você só precisa fornecer um texto ou URL, não ambos;
  • Você só pode invocar a API, como resultado de uma ação do usuário. (Por exemplo, você não pode chamar o método navigator.share() no onload da página.);
  • Os valores de propriedade que você passar para o API devem ser sempre Strings.

Siga em frente

A API ainda não está disponível em todas as plataformas, então você terá que lidar, com atenção, com os diferentes cenários em que você não tem a disponibilidade de chamar o método. Como o Paul Kinlan recomenda e já utiliza em seu blog, segue a seguinte abordagem para contornar esse “problema”:

  • Use seu serviço de compartilhamento preferencial através de um simples <a> (Com a URL do Twitter é um exemplo de fallback).
  • Verifique a disponibilidade do API (navigator.share !== undefined).
  • Aguarde até que o conteúdo esteja disponível e, em seguida, localize o elemento para compartilhar.
  • Intercepte e previna o comportamento padrão do clique (event.preventDefault() da função click).
  • Chame então o método da API (navigator.share()).

Nosso HTML simples com o link de fallback:

<div class="share">
  <a class="url" href="https://braziljs.org/blog/web-share-api/">Compartilhar</a>
</div>

E o nosso JS adicionando o evento no click do link:

if(navigator.share !== undefined) {
    document.addEventListener('DOMContentLoaded', e => { let shareBtn = document.querySelector('div.share a');

    if(!!shareBtn === false) return;
    shareBtn.addEventListener('click', clickEvent => {

        clickEvent.preventDefault();

        navigator.share({title: document.title, text: window.location.href, url: window.location.href})
            .then(() => console.log('Obrigado por compartilhar <3'),
            error => console.log('Erro ao compartilhar:', error));
        });    

    }); 

} 

Compartilhando a URL correta

Vale lembrar que é importante pensar sobre a URL que desejamos compartilhar. Em muitos casos, o usuário poderá estar acessando o seu site através de um dispositivo móvel e seu site pode ter um “m.” ou “mobile.” na URL ou uma URL que é dinâmica para o contexto em que o usuário se encontra. Nesse caso, você pode usar a canonical URL na sua página para proporcionar uma melhor experiência para o usuário. Por exemplo, você pode fazer o seguinte:

let url = document.location;
let canonicalElement = document.querySelector('link[rel=canonical]');
if(canonicalElement !== undefined) url = canonicalElement.href;

Conclusão

Há um certo tempo, temos visto uma série de “maneiras” para invocar recursos de compartilhamento nativos das plataformas, mas todos eles têm desvantagens significativas, alguns como o Web Intents já foram até descontinuados por tais desvantagens. A Web Share API é ainda uma proposta, isso significa que futuramente ela pode também morrer, ser descontinuada e até substituída por uma alternativa melhor, mas essa é uma das vantagens da Web: Evolução constante e sempre pensando no que é melhor para todos.

Recomendamos que utilize-a com moderação e fique atento às novidades, afinal de contas, queremos propor o melhor a nossos usuários, certo?

Nós testamos a funcionalidade e criamos um exemplo ao qual você pode acessar (e testar) através da seguinte URL WebShare BrazilJS.

E você, já experimentou essa funcionalidade? Compartilhe conosco como foi ou está sendo sua experiência nos comentários abaixo.

Referências

Segue alguns links úteis onde é possível obter mais informações sobre a Web Share API:


BrazilJS é uma iniciativa NASC