Webfreigabe-API

Das Geschenk des Gebens

Die Nutzung der nächsten Generation von Web-Apps hat einige klare Vorteile, von denen einer die Share-API des Navigators nutzt. Dank eines sich ständig weiterentwickelnden umfangreichen Satzes an Funktionen kann Ihr Navigator Ihrer Wahl jetzt die Web Share API aufrufen, um die folgenden Elemente freizugeben:

• Klartext
• Links durch Angabe eines Titels
• Dateien direkt

Wenn der Browser eines Benutzers die neue navigator.share unterstützt, können Sie diese Funktion jetzt nutzen!

Demozeit!

Die Nutzung der Share-Funktionalität ist so einfach wie es nur geht, hier ist ein Beispiel, das tatsächlich auf der Site verwendet wird:

<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>

Wie Sie sehen, ruft dieser Callback (wenn möglich) die asynchrone Share-Funktion auf und liefert einige Daten, damit eine schöne URL + beschreibender Titel und Untertitel im Share-Sheet angezeigt werden können. Der gezeigte Code wird in einer etwas anderen Variante am Ende dieses Artikels verwendet. Wenn Ihr Browser das Teilen unterstützt, wird eine entsprechende Schaltfläche in der "Aktionen"-Zeile angezeigt.

Wo zu verwenden

Zum jetzigen Zeitpunkt kann die API hauptsächlich auf mobilen Varianten der gängigen Browser (Chrome, Opera, Safari) verwendet werden, jedoch nur auf Safari + Edge auf dem Desktop. Da diese Funktionalität nicht auf bestimmte Hardwareanforderungen beschränkt ist, gehe ich davon aus, dass der Support in den kommenden Monaten zunehmen wird.

Und ja, das war eine kurze Einführung in die Web Share API. Weitere Informationen finden Sie in der verlinkten web.dev sowie in den MDN-Artikeln im Addendum.

• Tom