自Chrome 61 for Android 首次推出Web 共享API 以來(lái)，它似乎一直默默無(wú)聞。實(shí)際上，它提供了一種方法，可以在直接從網(wǎng)站或Web 應(yīng)用程序共享內(nèi)容（例如鍊接或聯(lián)繫人卡片）時(shí)，觸發(fā)設(shè)備的原生共享對(duì)話框（如果使用Safari，則為桌面）。

雖然用戶已經(jīng)可以通過(guò)原生方式從網(wǎng)頁(yè)共享內(nèi)容，但他們必須在瀏覽器菜單中找到該選項(xiàng)，即使那樣，也無(wú)法控制共享的內(nèi)容。此API 的引入允許開(kāi)發(fā)人員通過(guò)利用用戶設(shè)備上的原生內(nèi)容共享功能，將共享功能添加到應(yīng)用程序或網(wǎng)站中。

這種方法比傳統(tǒng)方法有很多優(yōu)勢(shì)：

• 與您在DIY 實(shí)現(xiàn)中可能擁有的有限數(shù)量的選項(xiàng)相比，用戶可以獲得更廣泛的內(nèi)容共享選項(xiàng)。
• 通過(guò)取消來(lái)自各個(gè)社交平臺(tái)的第三方腳本，您可以縮短頁(yè)面加載時(shí)間。
• 您無(wú)需為不同的社交媒體網(wǎng)站和電子郵件添加一系列按鈕。只需一個(gè)按鈕即可觸發(fā)設(shè)備的原生共享選項(xiàng)。
• 用戶可以在自己的設(shè)備上自定義他們首選的共享目標(biāo)，而不會(huì)僅限於預(yù)定義的選項(xiàng)。

瀏覽器支持說(shuō)明

在我們?cè)敿?xì)介紹API 的工作原理之前，讓我們先解決瀏覽器支持的問(wèn)題。說(shuō)實(shí)話，目前瀏覽器支持情況並不理想。它僅適用於Chrome for Android 和Safari（桌面和iOS）。

此瀏覽器支持?jǐn)?shù)據(jù)來(lái)自Caniuse，其中包含更多詳細(xì)信息。數(shù)字表示瀏覽器在該版本及更高版本中支持該功能。

桌面端

移動(dòng)/平板電腦

但不要因此而氣餒，不要在您的網(wǎng)站上採(cǎi)用此API。正如您將看到的，實(shí)現(xiàn)對(duì)不支持它的瀏覽器的回退非常容易。

使用API 的一些要求

在您可以在自己的Web 項(xiàng)目上採(cǎi)用此API 之前，需要注意兩點(diǎn)：

• 您的網(wǎng)站必須通過(guò)HTTPS 提供服務(wù)。為了便於本地開(kāi)發(fā)，當(dāng)您的站點(diǎn)在localhost 上運(yùn)行時(shí)，API 也能工作。
• 為防止濫用，API 只能響應(yīng)某些用戶操作（例如單擊事件）來(lái)觸發(fā)。

示例

為了演示如何使用此API，我準(zhǔn)備了一個(gè)演示，其工作原理與我的網(wǎng)站基本相同。以下是它的外觀：

目前，單擊共享按鈕後，將彈出一個(gè)對(duì)話框，顯示一些共享內(nèi)容的選項(xiàng)。以下是幫助我們實(shí)現(xiàn)此目標(biāo)的代碼部分：

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

讓我們繼續(xù)將此示例轉(zhuǎn)換為使用Web 共享API。首先要做的是檢查API 是否確實(shí)受用戶瀏覽器的支持，如下所示：

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

使用Web 共享API 就像調(diào)用navigator.share()方法並傳遞一個(gè)至少包含以下字段之一的對(duì)像一樣簡(jiǎn)單：

• url ：表示要共享的URL 的字符串。這通常是文檔URL，但不一定是。您可以通過(guò)Web 共享API 共享任何URL。
• title ：表示要共享的標(biāo)題的字符串，通常為document.title 。
• text ：您想要包含的任何文本。

以下是實(shí)際應(yīng)用中的樣子：

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

此時(shí)，一旦在支持的瀏覽器中單擊共享按鈕，本機(jī)選擇器將彈出所有用戶可以共享數(shù)據(jù)的可能目標(biāo)。目標(biāo)可以是社交媒體應(yīng)用程序、電子郵件、即時(shí)消息、短信或其他已註冊(cè)的共享目標(biāo)。

該API 基於Promise，因此您可以附加.then()方法來(lái)顯示共享成功的消息，並使用.catch()處理錯(cuò)誤。在現(xiàn)實(shí)場(chǎng)景中，您可能希望使用以下代碼段獲取頁(yè)面的標(biāo)題和URL：

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

對(duì)於URL，我們首先檢查頁(yè)面是否具有規(guī)範(fàn)URL，如果具有，則使用該URL。否則，我們從document.location獲取href 。

提供回退是個(gè)好主意

在不支持Web 共享API 的瀏覽器中，我們需要提供回退機(jī)制，以便這些瀏覽器上的用戶仍然可以獲得一些共享選項(xiàng)。

在我們的例子中，我們有一個(gè)彈出對(duì)話框，其中包含一些共享內(nèi)容的選項(xiàng)，並且我們演示中的按鈕實(shí)際上並沒(méi)有鏈接到任何地方，因?yàn)?，嗯，它只是一個(gè)演示。但是，如果您想了解如何在沒(méi)有第三方腳本的情況下創(chuàng)建自己的鏈接來(lái)共享網(wǎng)頁(yè)，Adam Coti 的文章是一個(gè)不錯(cuò)的起點(diǎn)。

我們要做的是為不支持Web 共享API 的瀏覽器的用戶顯示回退對(duì)話框。這就像將打開(kāi)共享對(duì)話框的代碼移動(dòng)到else塊中一樣簡(jiǎn)單：

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

現(xiàn)在，無(wú)論用戶使用什麼瀏覽器，所有用戶都得到了覆蓋。以下是共享按鈕在兩個(gè)移動(dòng)瀏覽器上的行為比較，一個(gè)支持Web 共享API，另一個(gè)不支持：

試試看！使用支持Web 共享的瀏覽器和不支持的瀏覽器。它應(yīng)該與上述演示類似。

總結(jié)

這涵蓋了您需要了解的關(guān)於Web 共享API 的幾乎所有基礎(chǔ)知識(shí)。通過(guò)在您的網(wǎng)站上實(shí)現(xiàn)它，訪問(wèn)者可以更輕鬆地通過(guò)各種社交網(wǎng)絡(luò)、聯(lián)繫人和其他原生應(yīng)用程序共享您的內(nèi)容。

還值得注意的是，如果您的Web 應(yīng)用程序滿足漸進(jìn)式Web 應(yīng)用程序安裝標(biāo)準(zhǔn)並添加到用戶的主屏幕，則您可以將其添加為共享目標(biāo)。這是您可以閱讀Google Developers 上的Web 共享目標(biāo)API 的一項(xiàng)功能。

儘管瀏覽器支持參差不齊，但回退很容易實(shí)現(xiàn)，所以我認(rèn)為沒(méi)有理由更多網(wǎng)站不採(cǎi)用它。如果您想了解更多關(guān)於此API 的信息，您可以在這裡閱讀規(guī)範(fàn)。

您使用過(guò)Web 共享API 嗎？請(qǐng)?jiān)谠u(píng)論中分享您的經(jīng)驗(yàn)。

以上是如何使用Web共享API的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！