Les applications Web peuvent utiliser les mêmes fonctionnalités de partage fournies par le système que les applications spécifiques à une plate-forme.
Avec l'API Web Share, les applications Web peuvent utiliser les mêmes fonctionnalités de partage fournies par le système que les applications spécifiques à la plate-forme. L'API Web Share permet aux applications Web de partager des liens, du texte et des fichiers avec d'autres applications installées sur l'appareil de la même manière que les applications spécifiques à une plate-forme.
Fonctionnalités et limites
Le partage Web présente les fonctionnalités et limites suivantes:
- Il ne peut être utilisé que sur un site accessible via HTTPS.
- Si le partage a lieu dans un iFrame tiers, l'attribut
allowdoit être utilisé. - Elle doit être appelée en réponse à une action de l'utilisateur, comme un clic. Il est impossible de l'appeler via le gestionnaire
onload. - Elle peut partager des URL, du texte ou des fichiers.
Partager des liens et du texte
Pour partager des liens et du texte, utilisez la méthode share(), qui est une méthode basée sur des promesses avec un objet de propriétés requis.
Pour éviter que le navigateur ne génère une erreur TypeError, l'objet doit contenir au moins l'une des propriétés suivantes: title, text, url ou files. Vous pouvez, par exemple, partager du texte sans URL, et inversement. Autoriser les trois membres renforce la flexibilité des cas d'utilisation. Imaginez qu'après avoir exécuté le code ci-dessous, l'utilisateur choisisse une application de messagerie comme cible. Le paramètre title peut devenir l'objet de l'e-mail, le text, le corps du message et les fichiers, les pièces jointes.
if (navigator.share) {
navigator.share({
title: 'web.dev',
text: 'Check out web.dev.',
url: 'https://web.dev/',
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
}
Si votre site comporte plusieurs URL pour le même contenu, partagez l'URL canonique de la page plutôt que l'URL actuelle. Au lieu de partager document.location.href, vous devez rechercher une balise <meta> d'URL canonique dans le <head> de la page et la partager. L'utilisateur bénéficie ainsi d'une meilleure expérience. Cela permet non seulement d'éviter les redirections, mais aussi de garantir qu'une URL partagée offre une expérience utilisateur correcte à un client particulier. Par exemple, si un ami partage une URL mobile et que vous la consultez sur un ordinateur de bureau, vous devriez voir une version pour ordinateur de bureau:
let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
url = canonicalElement.href;
}
navigator.share({url});
Partager des fichiers
Pour partager des fichiers, commencez par tester et appelez navigator.canShare(). Incluez ensuite un tableau de fichiers dans l'appel de navigator.share():
if (navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share({
files: filesArray,
title: 'Vacation Pictures',
text: 'Photos from September 27 to October 14.',
})
.then(() => console.log('Share was successful.'))
.catch((error) => console.log('Sharing failed', error));
} else {
console.log(`Your system doesn't support sharing files.`);
}
Notez que l'exemple gère la détection de caractéristiques en testant navigator.canShare() plutôt que navigator.share().
L'objet de données transmis à canShare() n'accepte que la propriété files.
Certains types de fichiers audio, image, PDF, vidéo et texte peuvent être partagés.
Consultez la page Extensions de fichier autorisées dans Chromium pour obtenir la liste complète. D'autres types de fichiers pourront être ajoutés ultérieurement.
Partage dans des cadres iFrame tiers
Pour déclencher l'action de partage à partir d'un iFrame tiers, intégrez l'iFrame avec l'attribut allow avec la valeur web-share:
<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>
Vous pouvez observer son fonctionnement dans une démonstration sur Glitch et consulter le code source.
Si vous ne fournissez pas l'attribut, une NotAllowedError sera générée avec le message Failed to execute 'share' on 'Navigator': Permission denied.
Étude de cas Sur la piste du père Noël
Santa Tracker, un projet Open Source, fait partie des traditions liées aux fêtes de fin d'année chez Google. Chaque année, au mois de décembre, vous pourrez fêter la saison avec des jeux et des expériences éducatives.
En 2016, l'équipe Sur la piste du père Noël a utilisé l'API Web Share sur Android. Cette API était parfaitement adaptée aux mobiles. Les années précédentes, l'équipe a supprimé les boutons de partage sur mobile, car l'espace est limité et l'équipe ne pouvait pas justifier d'avoir plusieurs cibles de partage.
Mais avec l'API Web Share, l'équipe a pu afficher un seul bouton, ce qui a permis de gagner de précieux pixels. Elle a également constaté que les utilisateurs partagent environ 20% de plus que ceux qui n'ont pas activé l'API. Accédez à Sur la piste du père Noël pour voir Web Share en action.
Prise en charge des navigateurs
La compatibilité des navigateurs avec l'API Web Share est nuancée. Il est donc recommandé d'utiliser la détection de caractéristiques (comme décrit dans les exemples de code précédents) au lieu de supposer qu'une méthode particulière est compatible.
Voici une ébauche de compatibilité avec cette fonctionnalité. Pour en savoir plus, suivez l'un des liens de l'assistance.
navigator.canShare()navigator.share()
Afficher la compatibilité avec l'API
Comptez-vous utiliser l'API Web Share ? Votre assistance publique aide l'équipe Chromium à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.
Envoyez un tweet à @ChromiumDev avec le hashtag #WebShare, et indiquez-nous où et comment vous l'utilisez.