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 dieselben vom System bereitgestellten Freigabefunktionen wie plattformspezifische Apps verwenden. Mit der Web Share API können Web-Apps Links, Text und Dateien mit anderen auf dem Gerät installierten Apps teilen, genau wie plattformspezifische Apps.

Hinweis: Das Teilen ist nur die halbe Miete. Web-Apps können auch als Freigabeziele verwendet werden. Das bedeutet, dass sie Daten, Links, Text und Dateien von plattformspezifischen oder Web-Apps empfangen können. Informationen zum Registrieren Ihrer App als Freigabeziel finden Sie unter Geteilte Daten empfangen.

Targeting-Auswahl für die 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 iFrame eines Drittanbieters erfolgt, muss das Attribut allow verwendet werden.
• Sie muss als Reaktion auf eine Nutzeraktion wie einen Klick aufgerufen werden. Der Aufruf über den onload-Handler ist nicht möglich.
• Sie können URLs, Text oder Dateien teilen.

Browser Support

• 128
• 93
• 
• 12.1

Source

Links und Text teilen

Wenn Sie Links und Text teilen möchten, verwenden Sie die Methode share(). Das ist eine Promise-basierte Methode mit einem erforderlichen Objekt für Attribute. Damit der Browser keinen TypeError ausgibt, 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, erhöht sich die Flexibilität der Anwendungsfälle. Stellen Sie sich vor, der Nutzer wählt nach dem Ausführen des folgenden Codes eine E‑Mail-Anwendung als Ziel aus. Der Parameter title wird möglicherweise zum E-Mail-Betreff, der Parameter text zum Inhalt der Nachricht und die Dateien zu den Anhängen.

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 deine Website mehrere URLs für denselben Inhalt hat, teile die kanonische URL der Seite anstelle der aktuellen URL. Anstatt document.location.href zu teilen, suchst du im <head>-Element der Seite nach einem kanonischen URL-Tag <meta> und teilst dieses. Das sorgt für eine bessere Nutzererfahrung. Dadurch werden nicht nur Weiterleitungen vermieden, sondern es wird auch dafür gesorgt, dass eine freigegebene URL die richtige Nutzererfahrung für einen bestimmten Client bietet. Wenn beispielsweise ein Freund eine mobile URL teilt und Sie diese 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, müssen Sie zuerst navigator.canShare() testen und aufrufen. Fügen Sie dann ein 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 im Beispiel die Featureerkennung durch Testen auf navigator.canShare() und nicht auf navigator.share() erfolgt. Das an canShare() übergebene Datenobjekt unterstützt nur das Attribut files. Bestimmte Arten von Audio-, Bild-, PDF-, Video- und Textdateien können geteilt werden. Eine vollständige Liste finden Sie unter Zulässige Dateiendungen in Chromium. In Zukunft werden möglicherweise weitere Dateitypen hinzugefügt.

Teilen in iFrames von Drittanbietern

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

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

Fallstudie: Auf den Spuren des Weihnachtsmanns

Schaltfläche „Teilen“ in „Auf den Spuren des Weihnachtsmanns“.

Auf den Spuren des Weihnachtsmanns ist ein Open-Source-Projekt und hat bei Google mittlerweile Tradition. Jeden Dezember können Sie die Weihnachtszeit mit Spielen und Lernangeboten feiern.

2016 hat das Team von Auf den Spuren des Weihnachtsmanns die Web Share API auf Android-Geräten verwendet. Diese API war perfekt für Mobilgeräte geeignet. In den vergangenen Jahren hatte das Team die Teilen-Schaltflächen auf Mobilgeräten entfernt, da der Platz dort begrenzt ist und es nicht gerechtfertigt war, mehrere Teilen-Ziele zu haben.

Mit der Web Share API konnten sie jedoch einen einzigen Button präsentieren und so wertvolle Pixel sparen. Außerdem wurde festgestellt, dass Nutzer mit Web Share etwa 20 % mehr Inhalte teilten als Nutzer ohne die API. Im Santa Tracker können Sie sich die Web Share API in Aktion ansehen.

Unterstützte Browser

Die Browserunterstützung für die Web Share API ist unterschiedlich. 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 eine grobe Übersicht über die Unterstützung dieser Funktion. Detaillierte Informationen finden Sie unter den Supportlinks.

navigator.canShare()

Browser Support

• 128
• 93
• 
• 14

Source

navigator.share()

Browser Support

• 128
• 93
• 
• 12.1

Source

Unterstützung für die API zeigen

Planen 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.

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

Nützliche Links

• Web Share Demos
• Scrapbook PWA