自 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)站上采用此 API。正如您將看到的，實(shí)現(xiàn)對(duì)不支持它的瀏覽器的回退非常容易。

使用 API 的一些要求

在您可以在自己的 Web 項(xiàng)目上采用此 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ī)范 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)站不采用它。如果您想了解更多關(guān)于此 API 的信息，您可以在這里閱讀規(guī)范。

您使用過(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)文章！