Web-Apps können dieselben vom System bereitgestellten Freigabefunktionen nutzen wie plattformspezifische Apps.
Mit der Web Share API können Webanwendungen dieselben vom System bereitgestellten Freigabefunktionen nutzen wie plattformspezifische Apps. Mit der Web Share API können Webanwendungen Links, Text und Dateien für andere auf dem Gerät installierte Apps auf dieselbe Weise wie plattformspezifische Apps freigeben.
Funktionen und Beschränkungen
Für die Webfreigabe gelten die folgenden Funktionen und Einschränkungen:
- Es kann nur auf Websites verwendet werden, auf die über HTTPS zugegriffen wird.
- Falls das Teilen in einem Drittanbieter-iFrame erfolgt, muss das Attribut
allowverwendet werden. - Sie muss als Reaktion auf eine Nutzeraktion, z. B. einen Klick, aufgerufen werden. Ein Aufruf über den Handler
onloadist nicht möglich. - Damit lassen sich URLs, Text oder Dateien teilen.
Links und Text teilen
Verwenden Sie zum Teilen von Links und Text die Methode share(). Sie ist eine Promise-basierte Methode mit einem erforderlichen Properties-Objekt.
Damit der Browser kein TypeError auslöst, muss das Objekt mindestens eines der folgenden Attribute enthalten: title, text, url oder files. Sie können beispielsweise Text ohne URL teilen oder umgekehrt. Wenn alle drei Mitglieder zugelassen werden, sind die Anwendungsfälle flexibler. Stellen Sie sich vor, nach der Ausführung des folgenden Codes würde der Nutzer eine E-Mail-Anwendung als Ziel auswählen. Der Parameter title kann der Betreff der E-Mail, die text, der Nachrichtentext, die Dateien und die Anhänge werden.
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 statt der aktuellen URL die kanonische URL der Seite an. Anstatt document.location.href freizugeben, würden Sie in den <head> der Seite nach einem kanonischen <meta>-URL-Tag suchen und dieses teilen. Dies verbessert die Nutzererfahrung. Dadurch werden nicht nur Weiterleitungen vermieden, sondern auch sichergestellt, dass eine freigegebene URL für einen bestimmten Client die richtige Nutzererfahrung bietet. Wenn beispielsweise ein Freund eine mobile URL teilt und Sie sie auf einem Desktop-Computer betrachten, sollte die Desktop-Version 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
Damit Sie Dateien freigeben können, müssen Sie zuerst navigator.canShare() testen und aufrufen. Fügen Sie dann ein Array mit 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 durchgeführt, indem navigator.canShare() und nicht navigator.share() getestet werden.
Das an canShare() übergebene Datenobjekt unterstützt nur das Attribut files.
Es können bestimmte Arten von Audio-, Bild-, PDF-, Video- und Textdateien freigegeben werden.
Eine vollständige Liste finden Sie unter Zulässige Dateierweiterungen in Chromium. In Zukunft werden möglicherweise weitere Dateitypen hinzugefügt.
Freigabe in Drittanbieter-iFrames
Wenn Sie die Aktion zum Teilen innerhalb eines Drittanbieter-iFrames auslösen möchten, 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>
In einer Demo zu Glitch kannst du dir dies in Aktion ansehen. Außerdem kannst du dir den Quellcode ansehen.
Wenn das Attribut nicht angegeben wird, wird ein NotAllowedError mit der Meldung Failed to execute 'share' on 'Navigator': Permission denied ausgegeben.
Fallstudie: Auf den Spuren des Weihnachtsmanns
Das Open-Source-Projekt Santa Tracker hat bei Google eine Tradition in der Weihnachtszeit. Jedes Jahr im Dezember können Sie mit Spielen und Lernerlebnissen feiern.
2016 nutzte das Team der Weihnachtsmann-Ortung die Web Share API für Android. Diese API war die perfekte Lösung für Mobilgeräte. In den vergangenen Jahren hat das Team die Teilen-Schaltflächen auf Mobilgeräten entfernt, weil der Platz knapp bemessen ist und sich mehrere Ziele nicht rechtfertigen konnten.
Mit der Web Share API konnte das Unternehmen jedoch nur eine Schaltfläche einblenden und so wertvolle Pixel sparen. Außerdem fanden sie heraus, dass Nutzer mit Web Share etwa 20% mehr Inhalte teilten als Nutzer ohne aktivierte API. Rufe Auf den Spuren des Weihnachtsmanns auf, um Web Share in Aktion zu sehen.
Unterstützte Browser
Die Browserunterstützung für die Web Share API ist differenziert und es wird empfohlen, die Funktionserkennung (wie in den vorherigen Codebeispielen beschrieben) zu verwenden, anstatt davon auszugehen, dass eine bestimmte Methode unterstützt wird.
Im Folgenden finden Sie einen groben Überblick über die Unterstützung für diese Funktion. Weitere Informationen erhalten Sie über einen der beiden Supportlinks.
navigator.canShare()navigator.share()
Unterstützung für die API zeigen
Möchten Sie die Web Share API verwenden? Ihre öffentliche Unterstützung hilft dem Chromium-Team, Funktionen zu priorisieren und anderen Browseranbietern zu zeigen, 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 es verwendest.