Cette page a été traduite par l'API Cloud Translation.

Intégrer l'UI de partage du système d'exploitation 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 à une plate-forme.

Joe Medley

Avec l'API Web Share, les applications Web peuvent utiliser le même système de partage en tant qu'applications spécifiques à une 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 dans le que pour les applications spécifiques à une plateforme.

</ph> Sélecteur de cible de partage au niveau du système avec une PWA installée comme option

Fonctionnalités et limites

Le partage Web présente les capacité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 allow doit être utilisé.
Elle doit être appelée en réponse à une action de l'utilisateur, telle qu'un clic. L'appeler via le gestionnaire onload est impossible.
Il peut partager des URL, du texte ou des fichiers.

Navigateurs pris en charge

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Source

Partager des liens et du texte

Pour partager des liens et du texte, utilisez la méthode share(), qui est basée sur des promesses avec un objet Properties requis. Pour empêcher le navigateur de générer une TypeError, l'objet doit contenir au moins des propriétés suivantes: title, text, url ou files. Toi peuvent, par exemple, partager du texte sans URL, ou inversement. Autoriser les trois permet d'élargir la flexibilité des cas d'utilisation. Imaginez qu'après avoir exécuté le code ci-dessous, l'utilisateur a choisi une application de messagerie comme cible. Le paramètre title peuvent devenir l'objet de l'e-mail, le text, le corps du message et les fichiers, et 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 de la page l'URL canonique au lieu de l'URL actuelle. Au lieu de partager document.location.href, vérifiez la présence d'une balise d'URL canonique <meta> dans le <head> de la page et le partager. Cela permettra d'améliorer l'expérience utilisateur. Cela permet non seulement d'éviter les redirections, mais aussi de s'assurer qu'une URL partagée est diffusée. l'expérience utilisateur correcte pour un client particulier. Par exemple, si un ami partage une URL mobile et que vous la regardez sur un ordinateur de bureau, vous devriez voir une version 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 navigator.canShare() et appelez-le. Incluez ensuite une 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() au lieu de 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 Extensions de fichier autorisées dans Chromium. pour en 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 depuis 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 voir cela dans une démonstration sur Glitch. et consultez le code source. Si vous ne fournissez pas l'attribut, une NotAllowedError affichera le message Failed to execute 'share' on 'Navigator': Permission denied

Étude de cas Sur la piste du père Noël

Application Sur la piste du père Noël avec un bouton de partage. — </ph> Bouton de partage "Sur la piste du père Noël".

Sur la piste du Père Noël, un projet Open Source, la tradition des fêtes de fin d'année chez Google. Chaque année en décembre, célébrez les fêtes de fin d'année 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 avait supprimé les boutons de partage sur mobile, car l'espace était et il ne pouvait pas justifier d'avoir plusieurs cibles de part.

Mais avec l'API Web Share, elle a pu présenter un seul bouton, de précieux pixels. Elle a également constaté que les utilisateurs partageaient avec Web Share 20% de partages d'utilisateurs pour lesquels l'API n'est pas activée. Aller à Sur la piste du père Noël pour voir le partage Web en action.

Prise en charge des navigateurs

La prise en charge de l'API Web Share par les navigateurs est nuancée. Nous vous recommandons d'utiliser cette fonctionnalité (comme décrit dans les exemples de code précédents), au lieu de supposer qu'une méthode particulière compatibles.

Voici une ébauche de la compatibilité de cette fonctionnalité. Pour en savoir plus, cliquez sur l'un des liens d'aide.

navigator.canShare()

Navigateurs pris en charge

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Source

navigator.share()

Navigateurs pris en charge

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Source

Apportez votre soutien à l'API

Prévoyez-vous d'utiliser l'API Web Share ? Votre assistance publique aide l'équipe Chromium hiérarchisent les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.

Envoyez un tweet à @ChromiumDev en utilisant le hashtag. #WebShare et n'hésitez pas à nous dire où et comment vous l'utilisez.

Intégrer l'UI de partage du système d'exploitation avec l'API Web Share

Fonctionnalités et limites

Partager des liens et du texte

Partager des fichiers

Partage dans des cadres iFrame tiers

Étude de cas Sur la piste du père Noël

Prise en charge des navigateurs

Apportez votre soutien à l'API

Liens utiles