Le don de donner
L'utilisation de la prochaine génération d'applications Web présente des avantages évidents, dont l'utilisation de l'API de partage du navigateur. Grâce à un riche ensemble de fonctionnalités en constante évolution, le navigateur de votre choix est désormais capable d'invoquer l'API Web Share pour partager les éléments suivants :
- texte brut
- liens en fournissant un titre
- fichiers directement
Si le navigateur d'un utilisateur prend en charge le nouveau navigator.share, vous pouvez utiliser cette fonctionnalité dès maintenant !
C'est l'heure de la démo !
L'utilisation de la fonctionnalité de partage est aussi simple que possible, voici un exemple réellement utilisé sur le site :
<Button
className={classes.container}
aria-label={"Share this article"}
onClick={() => {
// '.share' can only by called when
// triggered by click-events to make
// sure it's the user's intention.
navigator.share?.({
title: info.title,
text: info.description,
url: `${getBaseRoute(routes.posts)}/${info.slug.current}`,
}).catch(console.error);
// Optionally virbrate slightly.
navigator.vibrate?.([30, 20, 10]);
}}>
<ShareIcon />
<Typography>{"Share"}</Typography>
</Button>
Comme vous pouvez le voir, ce rappel invoque la fonction de partage asynchrone (si possible) et fournit des données afin qu'une belle URL + titre et sous-titre descriptifs puissent être affichés dans la feuille de partage. Le code affiché est utilisé dans une variante légèrement différente à la fin de cet article. Si votre navigateur prend en charge le partage, un bouton associé sera affiché dans la ligne "Actions".
Où utiliser
Au moment de la rédaction, l'API peut principalement être utilisée sur les variantes mobiles des navigateurs populaires (Chrome, Opera, Safari), mais uniquement sur Safari + Edge sur Desktop. Comme cette fonctionnalité n'est pas limitée à des exigences matérielles spécifiques, je m'attends à ce que le support augmente dans les mois à venir.
Et oui, c'était une introduction rapide à l'API Web Share, pour plus d'informations, consultez le lien web.dev ainsi que les articles MDN dans l'addendum.
- Tom
