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!