Introduction a l API WebShare

publié le

Chrome 55 lançait en origin trial] la Web Share API pour permettre d’accéder aux possibilités de partage native du système (sms, email, réseau sociaux, …) depuis une application web (progressive ou non). Cette API est très simple d’utilisation et donne toujours plus de puissance à nos PWA pour concurrencer les hybrides & natives.

Une simple promesse

Share est une API de navigator consommant un paramètre de type Object et retournant une Promise. Le paramètre possède 3 propriétés: title, text et url de type String.

navigator.share({
        title: document.title,
        text: "Hello World",
        url: window.location.href
}).then(() => console.log('Successful share'))
.catch(error => console.log('Error sharing:', error));

Pour utiliser cette API, vous devez respecter ces 4 contraintes :

  • Servir votre application sur HTTPS
  • Passer au moins une des 2 propriétés text ou url
  • Invoquer l’api share sur une gesture (action clavier ou souris ou touch …)

Mise en place

L’API étant en origin trial, elle peut-être amenée à beaucoup évoluer avant la sortie officielle. Pour la mettre en place il faut donc au préalable demander l’acces à la feature pour votre domaine en remplissant ce formulaire.

Chrome traitera votre demande en 1 jour ouvré et vous filera un token valide pour 6 semaines.

Pour informer Chrome que votre application a de nouveaux super-pouvoirs, il faut lui déclarer la meta suivante : 

<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

Formater automatiquement

Un moyen efficace d’assurer la cohérence de votre partage avec d’autres boutons, est d’utiliser les valeurs de vos attributs OpenGraph si vous en avez : 

function getOpenGraphData(property){
        return document.querySelector(`meta[property="${property}"]`).getAttribute('content');
}
navigator.share({
        title: getOpenGraphData('og:title'),
        text: getOpenGraphData('og:description'),
        url: getOpenGraphData('og:url')
})

De cette façon le partage sur les réseaux sociaux, se fera exactement de la même façon que via leurs boutons dédiés.

Conclusion

Une nouvelle API simplissime pour des fonctionnalités toujours plus proches du natifs pour nos PWA. La prochaine étape de cette API serait de transmettre autre chose que du texte, également dans les bacs, la capacité de recevoir des partages pour nos applications, et pas seulement d’en émettre avec la Web Share Target API, affaires à suivre.

N’hésitez pas à le tester sur la présente page, via le bouton a coté de la date de publication, ou bien le lien Partager ci-dessous. Si vous trouvez cet article court malgré ma promesse d’en faire un plus long, ne vous inquiétez pas il arrive la semaine prochaine (comme prévu).

Tweet