So verwenden Sie die Web Share -API

Es scheint verdeckt worden zu sein, seit Chrome 61 für Android seine Web Sharing -API erstmals gestartet hat. Tatsächlich bietet es eine Möglichkeit, einen nativen Dialogfeld für das Gerät (Desktop bei Verwendung von Safari) auszulösen , wenn Inhalte direkt von einer Website oder Webanwendung (z. B. Link oder Kontaktkarte) geteilt werden.

Während Benutzer Inhalte bereits auf native Weise von Webseiten freigeben können, müssen sie die Option im Browsermenü finden, und selbst dann gibt es keine Kontrolle über den gemeinsam genutzten Inhalt. Durch die Einführung dieser API können Entwickler Anwendungen oder Websites Freigabefunktionen hinzufügen, indem native Inhalte -Sharing -Funktionen auf Benutzergeräten genutzt werden.

Diese Methode hat viele Vorteile gegenüber der traditionellen Methode:

• Benutzer haben eine breitere Palette von Inhaltsfreigabeoptionen als die begrenzte Anzahl von Optionen, die Sie möglicherweise in Ihrer DIY -Implementierung haben.
• Durch Abbrechen von Drittanbieter-Skripten von verschiedenen sozialen Plattformen können Sie die Ladezeit des Seiten verkürzen.
• Sie müssen nicht eine Reihe von Schaltflächen zu verschiedenen Social -Media -Websites und -E -Mails hinzufügen. Die native Sharing -Option des Geräts wird mit nur einer Taste ausgelöst.
• Benutzer können ihre bevorzugten gemeinsam genutzten Ziele auf ihren Geräten anpassen, ohne auf vordefinierte Optionen beschränkt zu sein.

Browser -Unterstützungsanweisungen

Bevor wir uns mit der Funktionsweise der API eingehen, lassen Sie uns das Problem der Browserunterstützung lösen. Um ehrlich zu sein, ist die Browserunterstützung derzeit nicht ideal. Es funktioniert nur mit Chrome für Android und Safari (Desktop und iOS).

Dieser Browser unterstützt Daten von Caniuse, die weitere Details enthält. Die Nummer zeigt an, dass der Browser diese Funktion in dieser Version und später unterstützt.

Desktop

Mobilfunk/Tablet -PC

Lassen Sie sich jedoch nicht davon entmutigen, übernehmen Sie diese API nicht auf Ihrer Website. Wie Sie sehen werden, ist es sehr einfach, einen Fallback in einen Browser zu implementieren, der nicht unterstützt.

Einige Anforderungen für die Verwendung von API

Bevor Sie diese API in Ihrem eigenen Webprojekt übernehmen können, müssen zwei Dinge bezeichnet werden:

• Ihre Website muss über https bereitgestellt werden. Für die lokale Entwicklung funktioniert auch die API, wenn Ihre Website auf Localhost ausgeführt wird.
• Um Missbrauch zu verhindern, kann die API nur als Antwort auf bestimmte Benutzeraktionen wie Klickereignisse auslösen.

Beispiel

Um zu demonstrieren, wie man diese API benutzt, habe ich eine Demo vorbereitet, die im Grunde genommen mit meiner Website funktioniert. So sieht es aus:

Nach dem Klicken auf die Schaltfläche Teilen wird derzeit ein Dialogfeld angezeigt, das einige Optionen zum Teilen von Inhalten zeigt. Hier ist der Teil des Codes, der uns hilft, dies zu erreichen:

 <code>shareButton.addEventListener('click', event => { shareDialog.classList.add('is-open'); });</code>

Lassen Sie uns dieses Beispiel in die Verwendung der Web Sharing -API umwandeln. Das erste, was Sie tun müssen, ist zu überprüfen, ob die API tatsächlich vom Browser des Benutzers unterstützt wird, wie unten gezeigt:

 <code>if (navigator.share) { // 支持Web 共享API } else { // 回退}</code>

Die Verwendung einer Web -Sharing -API ist so einfach wie das Aufrufen navigator.share() und das Übergeben eines Objekts, das mindestens eines der folgenden Felder enthält:

• url : Eine Zeichenfolge, die die zu gemeinsam genutzte URL darstellt. Dies ist normalerweise eine Dokument -URL, aber nicht unbedingt. Sie können jede URL über die Web -Sharing -API teilen.
• title : Eine Zeichenfolge, die den zu gemeinsam genutzten Titel darstellt, normalerweise document.title .
• text : Jeder Text, den Sie einschließen möchten.

So sieht es in der tatsächlichen Anwendung aus:

 <code>shareButton.addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'WebShare API Demo', url: 'https://codepen.io/ayoisaiah/pen/YbNazJ' }).then(() => { console.log('Thanks for sharing!'); }) .catch(console.error); } else { // 回退} });</code>

An diesem Punkt wird der native Selektor alle möglichen Ziele, die Benutzer Daten freigeben können, nach dem Klicken auf die Schaltfläche zur Freigabe im unterstützten Browser angeklickt. Das Ziel kann eine Social -Media -App, eine E -Mail, Instant Messaging, Textnachrichten oder ein anderes registriertes gemeinsames Ziel sein.

Die API basiert auf Versprechen, sodass Sie .catch() .then() In einem realen Szenario möchten Sie möglicherweise das folgende Code-Snippet verwenden, um den Titel und die URL der Seite zu erhalten:

 <code>const title = document.title; const url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;</code>

Für URLs prüfen wir zunächst, ob die Seite eine kanonische URL hat, und verwenden Sie diese URL. Andernfalls erhalten wir href von document.location .

Es ist eine gute Idee, einen Fallback zu bieten

In Browsern, die die Web -Sharing -API nicht unterstützen, müssen wir einen Fallback -Mechanismus bereitstellen, damit die Benutzer in diesen Browsern weiterhin einige Freigabemöglichkeiten erhalten.

In unserem Fall haben wir einen Pop-up-Dialog mit einigen Optionen, um Inhalte zu teilen, und die Schaltflächen in unserer Demo sind nicht mit irgendwohin verknüpft, da es sich nur um eine Demo handelt. Wenn Sie jedoch wissen möchten, wie Sie Ihren eigenen Link erstellen, um eine Webseite ohne Drittanbieter-Skript zu teilen, ist Adam Cotis Artikel ein großartiger Ort zum Starten.

Wir möchten einen Fallback -Dialog für Benutzer von Browsern anzeigen, die die API für Web -Sharing nicht unterstützen. Es ist so einfach, den Code zu verschieben, der einen gemeinsam genutzten Dialog in else Block öffnet:

 <code>shareButton.addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'WebShare API Demo', url: 'https://codepen.io/ayoisaiah/pen/YbNazJ' }).then(() => { console.log('Thanks for sharing!'); }) .catch(console.error); } else { shareDialog.classList.add('is-open'); } });</code>

Unabhängig davon, welchen Browser der Benutzer verwendet, sind alle Benutzer abgedeckt. Hier ist ein Vergleich darüber, wie sich die Taste zur Freigabe auf zwei mobilen Browsern verhält, einer unterstützt die Web -Sharing -API und der andere nicht:

Versuchen Sie es! Verwenden Sie Browser, die die Webfreigabe und nicht unterstützte Browser unterstützen. Es sollte der obigen Demonstration ähnlich sein.

Zusammenfassen

Dies deckt fast alle Grundlagen ab, die Sie über die Web -Sharing -API wissen müssen. Durch die Implementierung auf Ihrer Website können Besucher Ihre Inhalte einfacher über verschiedene soziale Netzwerke, Kontakte und andere native Anwendungen freigeben.

Es ist auch erwähnenswert, dass Sie sie als gemeinsam genutztes Ziel hinzufügen können, wenn Ihre Webanwendung die Progressive Web Application Installation Criteria erfüllt und dem Startbildschirm des Benutzers hinzugefügt wird. Dies ist eine Funktion, die Sie über die Web -Share -Ziel -API von Google -Entwicklern lesen können.

Obwohl die Browser -Unterstützung gezackt ist, sind Fallbacks leicht zu implementieren, so dass es keinen Grund gibt, warum mehr Websites es nicht übernehmen. Wenn Sie mehr über diese API erfahren möchten, können Sie die Spezifikation hier lesen.

Haben Sie die Web -Sharing -API verwendet? Bitte teilen Sie Ihre Erfahrungen in den Kommentaren mit.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Web Share -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!