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()
noonload
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çã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
Create your profile
Only paid subscribers can comment on this post
Check your email
For your security, we need to re-authenticate you.
Click the link we sent to , or click here to sign in.