Partagez comme une application native avec l'API Web Share

Avec la API Web Share, las aplicaciones web pueden utilizar las mismas capacidades de uso compartido proporcionadas por el sistema que las aplicaciones nativas. La API Web Share hace posible que las aplicaciones web compartan enlaces, texto y archivos con otras aplicaciones instaladas en el dispositivo de la misma manera que las aplicaciones nativas.

Concepts et utilisation

Capacités et limites

Le partage Web présente les capacités et limitations suivantes:

• Solo se puede usar en un sitio que admita HTTPS.
• Debe invocarse en respuesta a una acción del Nom d'utilisateur, como un clic. Invocándolo a través del en charge le gestionnaire est impossible.
• Puede compartir URL, texto o archivos.
• À partir de la mi-2020, il n'est disponible que sur Safari et sur Android sur les fourches Chromium. Regarder
  MDN
  pour plus de détails.

Partager des liens et du texte

Pour partager des liens et du texte, utilisez le Compartir () método, que es un método basado en promesas con un objeto de propiedades requerido. Para evitar que el le navigateur arroje un Erreur-type, l'objet doit contenir au moins l'une des propriétés suivantes: Titre, texte, URL ou des dossiers. Vous pouvez, par exemple, partager du texte sans URL ou vice versa. Permettez aux trois membres d'étendre la flexibilité des cas d'utilisation. Imaginez si, après avoir exécuté le code suivant, l'utilisateur choisissait une application de messagerie comme destination. Les Titre Le paramètre peut devenir le sujet de l'email, le texte, le corps du message et les fichiers, les pièces jointes.

si (navigateur.Compartir) {
navigateur.Compartir({
Titre: 'web.dev',
texte: 'Check out web.dev.',
URL: 'https://web.dev/',
})
.then(() => console.Journal('Successful share'))
.catch((Erreur) => console.Journal('Error sharing', Erreur));
}

Si su sitio tiene varias URL para el mismo Contenu, comparta la URL canónica de la página en lugar de la URL actual. En lugar de compartir
document.location.href, vous devriez rechercher une URL canonique étiquette sur la page y comparte eso. Esto proporcionará una mejor experiencia al usuario. No solo evita las redirecciones, sino que también garantiza que una URL compartida proporcione la expérience utilisateur correcta para un client en particular. Por ejemplo, si un amigo comparte una URL móvil y la miras en una computadora de escritorio, deberías ver una versión de escritorio:

laisser URL = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
si (canonicalElement !== nul) {
URL = canonicalElement.href;
}
navigateur.Compartir({URL: URL});

Partager des fichiers

Pour partager des fichiers, essayez d'abord d'appeler navigator.canShare (). Incluez ensuite un tableau de fichiers dans l'appel à navigator.share ():

si (navigateur.canShare && navigateur.canShare({ des dossiers: filesArray })) {
  navigateur.Compartir({
    des dossiers: filesArray,
    Titre: 'Vacation Pictures',
    texte: 'Photos from September 27 to October 14.',
  })
  .then(() => console.Journal('Share was successful.'))
  .catch((Erreur) => console.Journal('Sharing failed', Erreur));
} else {
  console.Journal(`Your system doesn't support sharing files.`);
}

Notez que l'exemple gère la détection des fonctionnalités en testant
naviagator.canShare () au lieu de pour navigator.share (). L'objet de données passé à peut partager () ne prend en charge que le des dossiers propriété. Les fichiers image, vidéo, audio et texte peuvent être partagés. (Regarder
Extensions de fichier autorisées dans Chromium.) D'autres types de fichiers peuvent être ajoutés à l'avenir.

Étude de cas de Santa Tracker

Traqueur du Père Noël, un proyecto de Open source, es una tradición navideña en Google. Cada diciembre, puedes celebrar la temporada con juegos y experiencias educativas.

En 2016, l'équipe de Santa Tracker a utilisé l'API Web Share sur Android. Cette API était parfaite pour les appareils mobiles. Au cours des années précédentes, l'équipe a désactivé les boutons de partage sur les appareils mobiles car l'espace est restreint et ils ne pouvaient pas justifier d'avoir plusieurs objectifs de partage.

Mais avec l'API Web Share, ils n'ont pu présenter qu'un seul bouton, économisant ainsi de précieux pixels. Ils ont également constaté que les utilisateurs partageaient avec Web Share environ 20% plus que les utilisateurs sans l'API activée. Se diriger vers
Traqueur du Père Noël pour voir Web Share en action.

Liens utiles

Démos de partage Web