L’API Web Share permet aux développeurs web de partager du contenu de manière native sur des navigateurs qui supportent cette fonctionnalité, comme les smartphones et certains navigateurs.
L’API Web Share est une interface JavaScript qui permet de déclencher les fonctionnalités de partage natives d’un appareil. C’est une manière pratique pour les utilisateurs de partager des liens, des textes et d’autres informations directement depuis une page web, sans avoir à copier manuellement le contenu.
Cliquez sur le bouton ci-dessous pour tester l’API web-share
Pour partager du contenu à l’aide de l’API Web Share, un site web doit d’abord vérifier si l’API est prise en charge par le navigateur de l’utilisateur. Ensuite, le site peut utiliser la méthode navigator.share() pour déclencher le dialogue de partage natif du système d’exploitation. Ce dialogue permet à l’utilisateur de sélectionner la destination du partage et de finaliser l’action.
Pour des raisons de sécurité, l’API Web Share ne fonctionne que sur des pages servies via HTTPS. Assurez-vous que votre site est sécurisé pour utiliser cette fonctionnalité.
Structure HTML
Nous commençons par créer une structure HTML de base avec un bouton et un paragraphe pour afficher les résultats. Le bouton permet de déclencher l’action de partage. Le paragraphe avec la classe .result sera utilisé pour afficher les messages de succès ou d’erreur.
<p class="center">Cliquez sur le bouton ci-dessous pour tester l'API web-share</p>
<button id="webShare">Partagez</button>L’API web-share pour le partage natif
Nous définissons un objet shareData qui contient les informations que nous souhaitons partager : un titre, un texte et une URL. Définir les données à partager :
let shareData = {
title: 'Créa-blog',
text: 'Ressources pour développeur web',
url: 'https://blog.crea-troyes.fr',
}Sélectionner les Éléments du DOM :
Nous utilisons document.getElementById et document.querySelector pour sélectionner le bouton et le paragraphe. Ces éléments seront utilisés pour attacher des événements et afficher les résultats.
const btn = document.getElementById('webShare');
const resultPara = document.querySelector('.result');Ajouter un Événement de Clic au Bouton :
Nous ajoutons un écouteur d’événements pour le clic sur le bouton. Lorsque le bouton est cliqué, nous tentons de partager les données en utilisant navigator.share.
btn.addEventListener('click', () => {
navigator.share(shareData)
.then(() =>
resultPara.textContent = 'Le partage a réussi'
)
.catch((e) =>
resultPara.textContent = 'Error: ' + e
)
});Gérer le partage et les erreurs :
Si le partage est réussi, nous affichons un message de succès dans le paragraphe. Sinon, nous affichons un message d’erreur.
.then(() =>
resultPara.textContent = 'Le partage a réussi'
)
.catch((e) =>
resultPara.textContent = 'Error: ' + e
)Code final de l’API web-share pour le partage natif depuis un navigateur
<p class="center">Cliquez sur le bouton ci-dessous pour tester l'API web-share</p>
<button id="webShare">Partagez</button>
<script>
let shareData = {
title: 'Créa-blog',
text: 'Ressources pour développeur web',
url: 'https://blog.crea-troyes.fr',
}
const btn = document.getElementById('webShare');
const resultPara = document.querySelector('.result');
btn.addEventListener('click', () => {
navigator.share(shareData)
.then(() =>
resultPara.textContent = 'Le partage a réussi'
)
.catch((e) =>
resultPara.textContent = 'Error: ' + e
)
});
</script>Types de contenus partageables
L’API Web Share peut partager différents types de contenus, notamment :
- Liens web : L’utilisateur peut partager le lien d’une page web avec d’autres applications.
- Texte : L’utilisateur peut partager un bloc de texte avec d’autres applications.
- Fichiers : L’utilisateur peut partager des fichiers locaux avec d’autres applications.
- Images : L’utilisateur peut partager des images locales avec d’autres applications.
L’API Web Share est une fonctionnalité puissante qui permet d’améliorer l’expérience utilisateur en facilitant le partage de contenus. Avec ce guide, vous devriez maintenant être en mesure de mettre en œuvre cette API dans vos propres projets. N’oubliez pas de tester la compatibilité de votre application sur différents appareils et navigateurs pour assurer une expérience utilisateur optimale.
