Über die Web Share API

Ich finde die Web Share API sehr cool (hier ist unsere Berichterstattung). Kurz gesagt, sie greift auf die nativen Sharing-Funktionen der jeweiligen Plattform zu, sofern diese unterstützt werden.

Das gefällt mir

Viel mehr als diese Dinge

Warum?

• Die Web Share API besteht aus nur wenigen Codezeilen. Einfach! Keine Bilder, kein schwerfälliger JavaScript oder Iframes, keine Gefahr, veraltet zu sein (hust, Google+).
• Die Benutzeroberfläche, die die Benutzer sehen, ist an ihre Plattform angepasst und vielleicht sogar *von ihnen* so angepasst, dass die Dinge enthalten sind, die sie wollen.

Gut gemacht, Web-Standards.

Aber sie wird nicht überall unterstützt. Ich schreibe diesen Blogbeitrag zum Beispiel in Chrome, und er funktioniert nicht im Desktop-Chrome. Aber er funktioniert im Desktop-Safari!

Wenn ich sie also verwenden möchte, teste ich lieber zuerst die Unterstützung, bevor ich den Button auf eine Seite setze. Das ist sehr einfach

if (navigator.share) {

}

Hier ist ein Beispiel, bei dem ich einen <button> in einen Artikel einfüge, falls die API unterstützt wird

Das JavaScript macht ein paar schicke Tanzschritte, um den Titel und den ersten Absatz des Beitrags zu extrahieren, die in der API verwendet werden. Ich mag, wie Jeremy Keith es auf Seitenebene macht

if (navigator.share) {
  navigator.share(
    {
      title: document.querySelector('title').textContent,
      text: document.querySelector('meta[name="description"]').getAttribute('content'),
      url: document.querySelector('link[rel="canonical"]').getAttribute('href')
    }
  );
}

Man könnte auch einfach Zeichenketten für diese Werte übergeben. Das zeigt nur, wie man dynamisch Dinge tun könnte, die auf jeder Seite funktionieren.

Jeremy beschäftigt sich auch damit, eine JavaScript-optionale Version der Web Share API zu befürworten, die seiner Meinung nach so funktionieren könnte

<button type="share">

Und dann, zur Angabe von Titel und Text

<button type="share" value="title,text">

Das kommt mir ein bisschen seltsam vor, mit dem Komma. Was, wenn der Titel ein Komma enthält? Und was ist mit der Angabe der URL? Könnten wir sie alle in Attribute aufteilen? Ich glaube, ich weiß, was Jeremy sagen würde: Das ist eine einfache deklarative Version. Wenn Sie das Standardverhalten ändern möchten, dafür gibt es JavaScript.

Aber sollte es überhaupt da sein, wenn der Browser es nicht unterstützt? Na klar, wenn Sie Polyfillen

Dieses Polyfill wandelt den Button in ein mailto:-Erlebnis um, wenn er nicht unterstützt wird. Das ist ziemlich clever. Ich glaube, wenn ich produktionsreif wäre, würde ich den Button wahrscheinlich nur einfügen, wenn die Funktion wirklich unterstützt wird.