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 vom System bereitgestellten Freigabefunktionen wie plattformspezifische Apps verwenden.

Joe Medley

Mit der Web Share API können Web-Apps die vom System bereitgestellte Freigabefunktion als plattformspezifische Apps. Mit der Web Share API können Web-Apps Links, Texte und Dateien mit anderen auf dem Gerät installierten Apps im selben als plattformspezifische Apps.

</ph> Freigabezielauswahl auf Systemebene mit einer installierten PWA als Option.

Funktionen und Beschränkungen

Für die Webfreigabe gelten 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-iFrame erfolgt, muss das Attribut allow verwendet werden.
Der Parameter muss als Reaktion auf eine Nutzeraktion, z. B. einen Klick, aufgerufen werden. Aufruf über den onload-Handler nicht möglich.
Damit können URLs, Text oder Dateien geteilt werden.

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

Links und Text teilen

Wenn du Links und Text teilen möchtest, verwende die share()-Methode. Sie basiert auf der Versprechen mit einem erforderlichen Properties-Objekt. Um zu verhindern, dass der Browser TypeError ausgibt, Das Objekt muss mindestens ein der folgenden Properties: title, text, url oder files. Ich zum Beispiel Text ohne URL teilen oder umgekehrt. Alle drei werden zugelassen, Mitglieder die Flexibilität von Anwendungsfällen erhöhen. Angenommen, nach der Ausführung des Codes unten hat der Nutzer eine E-Mail-Anwendung als Ziel ausgewählt. Der title-Parameter kann der Betreff der E-Mail, das text, der Nachrichtentext und die Dateien, Anhänge.

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 dieselben Inhalte hat, teilen Sie die anstelle der aktuellen URL. Anstelle von document.location.href, würden Sie nach einem kanonischen URL-<meta>-Tag suchen in <head> der Seite und teile ihn. Dies verbessert die Nutzerfreundlichkeit Nutzer. Dadurch werden nicht nur Weiterleitungen vermieden, sondern auch sichergestellt, dass eine gemeinsam genutzte URL die richtige User Experience für einen bestimmten Kunden zu finden. Wenn beispielsweise ein Freund eine mobile URL teilt und auf einem Desktop-Computer aufgerufen wird, 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

Um Dateien freizugeben, führen Sie zunächst einen Test auf und rufen Sie navigator.canShare() auf. Fügen Sie dann ein Array der Dateien im Aufruf von navigator.share():

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 das Beispiel die Feature-Erkennung verarbeitet, indem es navigator.canShare() statt navigator.share(). Das an canShare() übergebene Datenobjekt unterstützt nur das Attribut files. Bestimmte Arten von Audio-, Bild-, PDF-, Video- und Textdateien können geteilt werden. Siehe Zulässige Dateierweiterungen in Chromium finden Sie eine vollständige Liste. In Zukunft werden möglicherweise weitere Dateitypen hinzugefügt.

Freigabe in Drittanbieter-iFrames

Um die Freigabeaktion in einem Drittanbieter-iFrame auszulösen, Betten Sie den iFrame mit dem Attribut allow 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>

Das kannst du dir in einer Demo zu Glitch ansehen. und rufen Sie den Quellcode auf. Wenn Sie das Attribut nicht angeben, führt dies zu einem NotAllowedError mit der Nachricht 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 — </ph> Teilen-Schaltfläche „Auf den Spuren des Weihnachtsmanns“

Auf den Spuren des Weihnachtsmanns, einem Open-Source-Projekt, Weihnachtstraditionen bei Google. Jeden Dezember kannst du die Festtage feiern mit Spielen und pädagogischen Erlebnissen.

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 letzten Jahren hat das Team die Freigabeschaltflächen auf Mobilgeräten entfernt, da der Platz zu einem Preisaufschlag und kann es nicht rechtfertigen, mehrere gemeinsame Ziele zu haben.

Mit der Web Share API konnten sie jedoch eine Schaltfläche präsentieren, kostbare Pixel gespart werden. Außerdem fanden sie heraus, dass Nutzer mit Web Share rund 20% mehr als ohne die API zu aktivieren. Gehe zu Auf den Spuren des Weihnachtsmanns und Web Share in Aktion sehen

Unterstützte Browser

Die Browserunterstützung für die Web Share API ist differenziert, und es wird empfohlen, diese Funktion zu verwenden zu erkennen (wie in den vorherigen Codebeispielen beschrieben), anstatt davon auszugehen, dass eine bestimmte Methode unterstützt.

Im Folgenden finden Sie einen groben Überblick über die Unterstützung für diese Funktion. Ausführliche Informationen erhalten Sie, wenn Sie auf einen der Support-Links klicken.

navigator.canShare()

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

navigator.share()

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

Unterstützung für die API anzeigen

Möchtest du die Web Share API verwenden? Dein öffentlicher Support hilft dem Chromium-Team Funktionen priorisieren und anderen Browseranbietern zeigen, wie wichtig es für ihre Unterstützung ist.

Sende einen Tweet mit dem Hashtag an @ChromiumDev #WebShare und teilen Sie uns mit, wo und wie Sie sie nutzen.

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