Web Share API

L'API Web Share est un agrément de l'expérience utilisateur permettant de s'affranchir des dizaines de scripts tiers (parfois lourds et intrusifs) à ajouter à une page pour chaque réseau social.

C'est très facile à mettre en place et à cerner, on peut le constater en survolant la spécification W3C Web Share API qui ne pèse pas plusieurs dizaines de pages.

Historiquement, pour permettre à un utilisateur de partager un article, nous devions intégrer des boutons spécifiques pour chaque plateforme (Twitter, Facebook, LinkedIn, etc.). Cela impliquait souvent le chargement de bibliothèques JavaScript externes, réseau par réseau, ou des solutions groupées telles que addThis, allouridssant la page, posant des problèmes de performance et de respect de la vie privée.

L'API Web Share change la donne en permettant aux sites web d'utiliser le mécanisme de partage natif du système d'exploitation. C'est donc la même popup (ou popin) qui s'ouvre lorsque vous partagez une photo depuis votre galerie.

À quoi sert Web Share API ?

Le bénéfice est triple :

• Moins de JavaScript à charger, moins de requêtes HTTP.
• L'internaute retrouve ses habitudes et ses contacts fréquents, quelle que soit l'application de destination (WhatsApp, Signal, e-mail, SMS, etc.).
• Un seul bouton suffit pour cibler toutes les destinations possibles.

(On rappelle qu'il vaut mieux utiliser un bouton pour une action en restant sur la même page, et un lien pour une action provoquant un changement de contexte/page).

Différences entre mobile et desktop

Bien que l'API soit standardisée, le comportement visuel varie selon la plateforme :

Caractéristique	Mobile (iOS / Android)	Desktop (Windows / macOS)
Interface	Popup de partage native	Menu contextuel du système ou fenêtre dédiée
Intérêt	Usage naturel	Pratique mais moins évident (souvent limité à l'email ou AirDrop)
Support	Quasi universel	Bon sur Chromium, Safari, Edge ; pas Firefox

🔐 L'API Web Share ne fonctionne que dans un contexte sécurisé, c'est-à-dire sur HTTPS, et doit impérativement être déclenchée par une action volontaire de l'utilisateur (un clic ou un appui) sinon ce sera bloqué.

Support

Si le support s'est largement généralisé, surtout sur mobile, certains environnements comme Firefox sur certains OS desktop ne l'ont pas encore appliqué alors même que la version mobile de Firefox le reconnaît.

On va donc penser amélioration progressive :

1. On vérifie si navigator.share existe.
2. Si oui, on affiche le bouton de partage natif.
3. Si non, on propose une alternative (fallback) : soit une simple copie de l'URL dans le presse-papier par exemple avec l'API Clipboard, soit l'affichage de liens de partage classiques (mailto:, liens directs vers les réseaux, etc).

Ce qu'on peut partager

D'un point de vue technique, l'objet passé à la méthode navigator.share() est flexible mais chaque clé répond à des contraintes spécifiques définies par la spécification W3C.

title

Il s'agit d'une chaîne de caractères représentant le titre du document ou de l'élément partagé. On va le retrouver comme sujet de l'e-mail si l'utilisateur choisit une application de messagerie ou comme titre de l'aperçu. Ce n'est pas du HTML, uniquement du texte brut.

text

C'est le corps descriptif du partage, en général on y place un résumé ou un message personnalisé. Dans le cas d'un partage via SMS ou WhatsApp, c'est ce contenu qui remplira le champ de saisie.

url

Une chaîne de caractères représentant une URL valide (absolue ou relative). Le navigateur résout automatiquement les URL relatives par rapport à l'URL de la page courante avant de les envoyer au système.

files

C'est l'ajout le plus complexe. : un tableau d'objets File (généralement créés via un constructeur new File() ou récupérés depuis un <input type="file">). Avant de partager des fichiers, il est impératif d'utiliser la méthode navigator.canShare({ files: mesFichiers }), elle va renvoyer un booléen indiquant si le système accepte le format et le poids des fichiers. En général on accepte couramment les images, les pdf, audio et vidéo mais pas les exécutables (.exe, .js) qui seront bloqués

Exemple de code (Vanilla JS)

Voici un exemple de code utilisant les promesses.

const shareBtn = document.querySelector('#btn-partage');

// On ne montre le bouton que si l'API est supportée
if (navigator.share) {
  shareBtn.style.display = 'block'; // Ou un équivalent

  shareBtn.addEventListener('click', async () => {
    try {
      await navigator.share({
        title: 'Le titre de l\'article',
        text: 'Une courte description',
        url: window.location.href
      });
      console.log('Contenu partagé avec succès !');
    } catch (err) {
      // L'utilisateur a annulé ou le partage a échoué
      console.log(`Erreur ou annulation : ${err}`);
    }
  });
} else {
  // Optionnel : afficher une autre solution (ex: copier le lien)
  console.log("Web Share API non supportée sur ce navigateur.");
}

Dans les frames

Attention désormais dans les frames (<iframe> en réalité, ce qui est le cas de la démo ci-dessus hébergée par codepen) vous devez autoriser spécifiquement cette API pour des raisons de sécurité avec l'attribut allow="web-share".