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:  Triggering a native Share intent on Android from the web Web Share API Explained Web Share API for sharing content to arbitrary destination Web Share in WICG