Wie man die Web Share API verwendet

Die Web Share API ist eine, die seit ihrer Einführung in Chrome 61 für Android anscheinend unter dem Radar geblieben ist. Im Wesentlichen bietet sie eine Möglichkeit, den nativen Share-Dialog eines Geräts (oder Desktops, wenn Safari verwendet wird) auszulösen, wenn Inhalte – sagen wir ein Link oder eine Visitenkarte – direkt von einer Website oder Webanwendung geteilt werden.

Obwohl es für einen Benutzer bereits möglich ist, Inhalte von einer Webseite über native Mittel zu teilen, müssen sie die Option im Browser-Menü finden, und selbst dann gibt es keine Kontrolle darüber, was geteilt wird. Die Einführung dieser API ermöglicht es Entwicklern, Sharing-Funktionalität in Apps oder Websites zu integrieren, indem sie die nativen Content-Sharing-Funktionen auf dem Gerät eines Benutzers nutzen.

Dieser Ansatz bietet eine Reihe von Vorteilen gegenüber herkömmlichen Methoden

• Dem Benutzer wird eine breite Palette von Optionen zum Teilen von Inhalten präsentiert, verglichen mit der begrenzten Anzahl, die Sie möglicherweise in Ihrer DIY-Implementierung haben.
• Sie können Ihre Seitenladezeiten verbessern, indem Sie auf Drittanbieter-Skripte von einzelnen Social-Media-Plattformen verzichten.
• Sie müssen keine Reihe von Schaltflächen für verschiedene Social-Media-Seiten und E-Mails hinzufügen. Eine einzige Schaltfläche reicht aus, um die nativen Sharing-Optionen des Geräts auszulösen.
• Benutzer können ihre bevorzugten Share-Ziele auf ihrem eigenen Gerät anpassen, anstatt auf vordefinierte Optionen beschränkt zu sein.

Ein Hinweis zur Browserunterstützung

Bevor wir uns mit den Details befassen, wie die API funktioniert, wollen wir das Thema Browserunterstützung klären. Um ehrlich zu sein, ist die Browserunterstützung derzeit nicht gut. Sie ist nur für Chrome für Android und Safari (Desktop und iOS) verfügbar.

Aber lassen Sie sich davon nicht entmutigen, diese API auf Ihrer Website zu implementieren. Es ist ziemlich einfach, einen Fallback für unterstützte Browser zu implementieren, die sie nicht anbieten, wie Sie sehen werden.

Ein paar Voraussetzungen für die Nutzung

Bevor Sie diese API in Ihrem eigenen Webprojekt einsetzen können, gibt es zwei wichtige Dinge zu beachten:

• Ihre Website muss über HTTPS geladen werden. Zur Erleichterung der lokalen Entwicklung funktioniert die API auch, wenn Ihre Website über localhost läuft.
• Um Missbrauch zu verhindern, kann die API nur als Reaktion auf eine Benutzeraktion (z. B. ein click-Ereignis) ausgelöst werden.

Hier ist ein Beispiel

Um zu demonstrieren, wie diese API verwendet wird, habe ich eine Demo vorbereitet, die im Wesentlichen so funktioniert wie auf meiner Website. Hier ist, wie sie aussieht:

Sehen Sie den Pen
WebShare API Demo – Start von Ayooluwa (@ayoisaiah)
auf CodePen.

An diesem Punkt, sobald Sie auf die Share-Schaltfläche klicken, erscheint ein Dialogfeld mit einigen Optionen zum Teilen des Inhalts. Hier ist der Teil des Codes, der uns hilft, dies zu erreichen:

shareButton.addEventListener('click', event => {
  shareDialog.classList.add('is-open');
});

Lassen Sie uns dieses Beispiel nun in die Web Share API umwandeln. Das erste, was zu tun ist, ist zu überprüfen, ob die API im Browser des Benutzers tatsächlich unterstützt wird, wie unten gezeigt:

if (navigator.share) {
  // Web Share API is supported
} else {
  // Fallback
}

Die Verwendung der Web Share API ist so einfach wie das Aufrufen der Methode navigator.share() und das Übergeben eines Objekts, das mindestens eines der folgenden Felder enthält:

• url: Eine Zeichenkette, die die zu teilende URL darstellt. Dies wird normalerweise die Dokumenten-URL sein, muss es aber nicht. Sie können jede URL über die Web Share API teilen.
• title: Eine Zeichenkette, die den zu teilenden Titel darstellt, normalerweise document.title.
• text: Jeder Text, den Sie einfügen möchten.

Hier ist, wie das in der Praxis aussieht:

shareButton.addEventListener('click', event => {
  if (navigator.share) {
    navigator.share({
      title: 'WebShare API Demo',
      url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
    }).then(() => {
      console.log('Thanks for sharing!');
    })
    .catch(console.error);
  } else {
    // fallback
  }
});

An diesem Punkt, sobald die Share-Schaltfläche in einem unterstützten Browser geklickt wird, erscheint der native Picker mit allen möglichen Zielen, mit denen der Benutzer die Daten teilen kann. Ziele können Social-Media-Apps, E-Mail, Instant Messaging, SMS oder andere registrierte Share-Ziele sein.

Die API ist Promise-basiert, sodass Sie eine .then()-Methode anhängen können, um möglicherweise eine Erfolgsmeldung anzuzeigen, wenn das Teilen erfolgreich war, und Fehler mit .catch() zu behandeln. In einer realen Anwendung möchten Sie vielleicht den Titel und die URL der Seite mit diesem Ausschnitt abrufen:

const title = document.title;
const url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;

Für die URL prüfen wir zuerst, ob die Seite eine kanonische URL hat und verwenden diese, falls ja. Andernfalls rufen wir den href von document.location ab.

Ein Fallback bereitzustellen ist eine gute Idee

In Browsern, in denen die Web Share API nicht unterstützt wird, müssen wir einen Fallback-Mechanismus bereitstellen, damit Benutzer auf diesen Browsern trotzdem einige Sharing-Optionen erhalten.

In unserem Fall haben wir einen Dialog, der mit einigen Optionen zum Teilen des Inhalts erscheint, und die Schaltflächen in unserer Demo verlinken tatsächlich nirgendwohin, da es sich, nun ja, um eine Demo handelt. Aber wenn Sie lernen möchten, wie Sie Ihre eigenen Links zum Teilen von Webseiten ohne Drittanbieter-Skripte erstellen können, ist Adam Cotis Artikel ein guter Ausgangspunkt.

Was wir tun wollen, ist, den Fallback-Dialog für Benutzer auf Browsern ohne Unterstützung für die Web Share API anzuzeigen. Dies geschieht so einfach, indem der Code, der den Share-Dialog öffnet, in den else-Block verschoben wird:

shareButton.addEventListener('click', event => {
  if (navigator.share) {
    navigator.share({
      title: 'WebShare API Demo',
      url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
    }).then(() => {
      console.log('Thanks for sharing!');
    })
    .catch(console.error);
  } else {
    shareDialog.classList.add('is-open');
  }
});

Jetzt sind alle Benutzer abgedeckt, unabhängig von ihrem Browser. Hier ist ein Vergleich, wie sich die Share-Schaltfläche auf zwei mobilen Browsern verhält, einer mit Web Share API-Unterstützung und der andere ohne:

Probieren Sie es aus! Verwenden Sie einen Browser, der Web Share unterstützt, und einen, der es nicht tut. Es sollte ähnlich wie die obige Demonstration funktionieren.

Sehen Sie den Pen
WebShare API Demo – Ende von Ayooluwa (@ayoisaiah)
auf CodePen.

Zusammenfassung

Dies deckt so ziemlich die Grundlagen ab, die Sie über die Web Share API wissen müssen. Durch die Implementierung auf Ihrer Website können Besucher Ihre Inhalte einfacher über eine größere Vielfalt von sozialen Netzwerken, mit Kontakten und anderen nativen Apps teilen.

Es ist auch erwähnenswert, dass Sie Ihre Webanwendung als Share-Ziel hinzufügen können, wenn sie die Installationskriterien für Progressive Web Apps erfüllt und zum Startbildschirm eines Benutzers hinzugefügt wird. Dies ist eine Funktion der Web Share Target API, über die Sie bei Google Developers lesen können.

Obwohl die Browserunterstützung lückenhaft ist, ist ein Fallback leicht zu implementieren, daher sehe ich keinen Grund, warum nicht mehr Websites dies übernehmen sollten. Wenn Sie mehr über diese API erfahren möchten, können Sie die Spezifikation hier lesen.

Haben Sie die Web Share API verwendet? Bitte teilen Sie es in den Kommentaren mit.