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

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

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

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

瀏覽器支持說明

在我們詳細(xì)介紹 API 的工作原理之前，讓我們先解決瀏覽器支持的問題。說實話，目前瀏覽器支持情況并不理想。它僅適用于 Chrome for Android 和 Safari（桌面和 iOS）。

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

桌面端

移動/平板電腦

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

使用 API 的一些要求

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

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

示例

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

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

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

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

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

使用 Web 共享 API 就像調(diào)用 navigator.share() 方法并傳遞一個至少包含以下字段之一的對象一樣簡單：

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

以下是實際應(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>

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

該 API 基于 Promise，因此您可以附加 .then() 方法來顯示共享成功的消息，并使用 .catch() 處理錯誤。在現(xiàn)實場景中，您可能希望使用以下代碼段獲取頁面的標(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>

對于 URL，我們首先檢查頁面是否具有規(guī)范 URL，如果具有，則使用該 URL。否則，我們從 document.location 獲取 href。

提供回退是個好主意

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

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

我們要做的是為不支持 Web 共享 API 的瀏覽器的用戶顯示回退對話框。這就像將打開共享對話框的代碼移動到 else 塊中一樣簡單：

<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)在，無論用戶使用什么瀏覽器，所有用戶都得到了覆蓋。以下是共享按鈕在兩個移動瀏覽器上的行為比較，一個支持 Web 共享 API，另一個不支持：

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

總結(jié)

這涵蓋了您需要了解的關(guān)于 Web 共享 API 的幾乎所有基礎(chǔ)知識。通過在您的網(wǎng)站上實現(xiàn)它，訪問者可以更輕松地通過各種社交網(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àn)，所以我認(rèn)為沒有理由更多網(wǎng)站不采用它。如果您想了解更多關(guān)于此 API 的信息，您可以在這里閱讀規(guī)范。

您使用過 Web 共享 API 嗎？請在評論中分享您的經(jīng)驗。

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