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.

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 einer Website verwendet werden, auf die über HTTPS zugegriffen wird.
Wenn die Freigabe in einem Drittanbieter-Frame erfolgt, muss das allow-Attribut verwendet werden.
Sie muss als Reaktion auf eine Nutzeraktion wie 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 Sie Links und Text teilen möchten, verwenden Sie die Methode share(). Das ist eine versprechensbasierte 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 alle drei Mitglieder zugelassen werden, ist die Flexibilität der Anwendungsfälle größer. 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, suchen Sie in der <head> der Seite nach einem <meta>-Tag für die kanonische URL und teilen Sie dieses. Das verbessert die Nutzerfreundlichkeit. So werden nicht nur Weiterleitungen vermieden, sondern auch dafür gesorgt, dass eine freigegebene URL für einen bestimmten Client die richtige Nutzererfahrung bietet. Wenn Ihnen beispielsweise ein Freund eine mobile URL sendet 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.`);
}

Beachten Sie, dass in diesem Beispiel die Feature-Erkennung durch Prüfen auf navigator.canShare() statt auf navigator.share() erfolgt. 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 iFrames von Drittanbietern

Wenn du die Freigabeaktion über einen Drittanbieter-Frame auslösen möchtest, bette den Frame 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. — Die Schaltfläche „Teilen“ von „Auf den Spuren des Weihnachtsmanns“.

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

2016 verwendete das Team von „Auf den Spuren des Weihnachtsmanns“ die Web Share API auf Android-Geräten. 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 die Funktion „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. Detaillierte Informationen finden Sie unter den jeweiligen Supportlinks.

navigator.canShare()

Unterstützte Browser

Quelle

navigator.share()

Unterstützte Browser

Quelle

Unterstützung für die API anzeigen

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

Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #WebShare und teilen Sie uns mit, wo und wie Sie ihn verwenden.

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

Funktionen und Beschränkungen

Links und Text teilen

Dateien teilen

Freigabe in iFrames von Drittanbietern

Fallstudie: Auf den Spuren des Weihnachtsmanns

Unterstützte Browser

Unterstützung für die API anzeigen

Hilfreiche Links