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()noonloadda 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çãoclick).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