Diese Seite wurde von der Cloud Translation API übersetzt.

Integration mit der Web Share API in die Freigabe-UI des Betriebssystems

Web-Apps können dieselben systemeigenen Freigabefunktionen wie plattformspezifische Apps verwenden.

Joe Medley

Mit der Web Share API können Web-Apps dieselben systemeigenen Freigabefunktionen wie plattformspezifische Apps verwenden. Mit der Web Share API können Web-Apps Links, Text und Dateien auf die gleiche Weise wie plattformspezifische Apps für andere auf dem Gerät installierte Apps freigeben.

Freigabezielauswahl auf Systemebene mit einer installierten PWA als Option. — Auswahl des Freigabeziels auf Systemebene mit einer installierten PWA als Option.

Funktionen und Beschränkungen

Die Webfreigabe hat die folgenden Funktionen und Einschränkungen:

Sie kann nur auf Websites verwendet werden, auf die über HTTPS zugegriffen wird.
Wenn die Freigabe in einem Drittanbieter-Frame erfolgt, muss das Attribut allow verwendet werden.
Der Parameter muss als Reaktion auf eine Nutzeraktion, z. B. einen Klick, aufgerufen werden. Ein Aufruf über den onload-Handler ist nicht möglich.
Sie können damit URLs, Text oder Dateien teilen.

Unterstützte Browser

Quelle

Links und Text teilen

Wenn du Links und Text teilen möchtest, verwende die Methode share(). Dabei handelt es sich um eine Promise-basierte Methode mit einem erforderlichen Properties-Objekt. Damit der Browser keine TypeError auslöst, muss das Objekt mindestens eine der folgenden Properties enthalten: title, text, url oder files. Sie können beispielsweise Text ohne URL oder umgekehrt teilen. Wenn Sie alle drei Elemente zulassen, sind Anwendungsfälle flexibler. Angenommen, der Nutzer hat nach dem Ausführen des folgenden Codes eine E-Mail-Anwendung als Ziel ausgewählt. Der Parameter title kann der Betreff der E-Mail, der text der Textkörper und die Dateien die Anhänge sein.

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

Wenn Ihre Website mehrere URLs für denselben Inhalt hat, geben Sie die kanonische URL der Seite anstelle der aktuellen URL an. Anstatt document.location.href zu teilen, würdest du stattdessen im <head> der Seite nach einem kanonischen <meta>-URL-Tag suchen und dieses freigeben. Das verbessert die Nutzerfreundlichkeit. Dadurch werden nicht nur Weiterleitungen vermieden, sondern auch dafür gesorgt, dass eine freigegebene URL einem bestimmten Client die richtige Nutzererfahrung bietet. Wenn ein Freund beispielsweise eine mobile URL teilt und Sie sie auf einem Computer aufrufen, sollte eine Desktopversion angezeigt werden:

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

Dateien teilen

Wenn Sie Dateien freigeben möchten, prüfen Sie zuerst, ob navigator.canShare() erreichbar ist, und rufen Sie sie dann auf. Fügen Sie dann einen Array von Dateien in den Aufruf von navigator.share() ein:

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

Im Beispiel wird die Featureerkennung auf navigator.canShare() statt auf navigator.share() getestet. Das an canShare() übergebene Datenobjekt unterstützt nur die Property files. Bestimmte Arten von Audio-, Bild-, PDF-, Video- und Textdateien können freigegeben werden. Eine vollständige Liste finden Sie unter Zulässige Dateiendungen in Chromium. In Zukunft werden möglicherweise weitere Dateitypen hinzugefügt.

Freigabe in Drittanbieter-iFrames

Wenn du die Freigabeaktion über einen Drittanbieter-Iframe auslösen möchtest, bette den Iframe mit dem allow-Attribut mit dem Wert web-share ein:

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

In einer Demo auf Glitch können Sie sich das in Aktion ansehen und den Quellcode ansehen. Wenn Sie das Attribut nicht angeben, erhalten Sie eine NotAllowedError mit der Meldung Failed to execute 'share' on 'Navigator': Permission denied.

Fallstudie: Auf den Spuren des Weihnachtsmanns

Die App „Auf den Spuren des Weihnachtsmanns“ mit einer Schaltfläche zum Teilen. — Schaltfläche zum Teilen von „Auf den Spuren des Weihnachtsmanns“.

Auf den Spuren des Weihnachtsmanns ist ein Open-Source-Projekt und eine festliche Tradition bei Google. Jedes Jahr im Dezember können Sie die Festtage mit Spielen und lehrreichen Erlebnissen feiern.

2016 nutzte das Team von "Auf den Spuren des Weihnachtsmanns" die Web Share API für Android. Diese API war perfekt für Mobilgeräte geeignet. In den Vorjahren hatte das Team die Schaltflächen zum Teilen auf Mobilgeräten entfernt, da der Platz knapp ist und mehrere Ziele für das Teilen nicht gerechtfertigt werden konnten.

Mit der Web Share API konnte das Team jedoch eine einzige Schaltfläche präsentieren und so wertvolle Pixel sparen. Außerdem stellte das Team fest, dass Nutzer mit Web Share etwa 20 % mehr Inhalte teilten als Nutzer, bei denen die API nicht aktiviert war. Auf der Seite Auf den Spuren des Weihnachtsmanns können Sie sich Web Share in Aktion ansehen.

Unterstützte Browser

Die Browserunterstützung für die Web Share API ist nicht einheitlich. Es wird empfohlen, die Funktionserkennung zu verwenden (wie in den vorherigen Codebeispielen beschrieben), anstatt davon auszugehen, dass eine bestimmte Methode unterstützt wird.

Hier finden Sie einen groben Überblick über die Unterstützung dieser Funktion. Ausführliche Informationen erhalten Sie, wenn Sie auf einen der Support-Links klicken.

navigator.canShare()

Unterstützte Browser

Quelle

navigator.share()

Unterstützte Browser

Quelle

Unterstützung für die API anzeigen

Möchtest du die Web Share API verwenden? Ihre öffentliche Unterstützung hilft dem Chromium-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

Sende einen Tweet mit dem Hashtag #WebShare an @ChromiumDev und teile uns mit, wo und wie du ihn verwendest.

Integration mit der Web Share API in die Freigabe-UI des Betriebssystems

Funktionen und Beschränkungen

Links und Text teilen

Dateien teilen

Freigabe in Drittanbieter-iFrames

Fallstudie: Auf den Spuren des Weihnachtsmanns

Unterstützte Browser

Unterstützung für die API anzeigen

Hilfreiche Links