如何使用Web共享API

自Chrome 61 for Android 首次推出Web 共享API 以來，它似乎一直默默無聞。實際上，它提供了一種方法，可以在直接從網站或Web 應用程序共享內容（例如鍊接或聯繫人卡片）時，觸發設備的原生共享對話框（如果使用Safari，則為桌面）。

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

這種方法比傳統方法有很多優勢：

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

瀏覽器支持說明

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

此瀏覽器支持數據來自Caniuse，其中包含更多詳細信息。數字表示瀏覽器在該版本及更高版本中支持該功能。

桌面端

移動/平板電腦

但不要因此而氣餒，不要在您的網站上採用此API。正如您將看到的，實現對不支持它的瀏覽器的回退非常容易。

使用API 的一些要求

在您可以在自己的Web 項目上採用此API 之前，需要注意兩點：

• 您的網站必須通過HTTPS 提供服務。為了便於本地開發，當您的站點在localhost 上運行時，API 也能工作。
• 為防止濫用，API 只能響應某些用戶操作（例如單擊事件）來觸發。

示例

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

目前，單擊共享按鈕後，將彈出一個對話框，顯示一些共享內容的選項。以下是幫助我們實現此目標的代碼部分：

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

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

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

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

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

以下是實際應用中的樣子：

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

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

該API 基於Promise，因此您可以附加.then()方法來顯示共享成功的消息，並使用.catch()處理錯誤。在現實場景中，您可能希望使用以下代碼段獲取頁面的標題和URL：

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

對於URL，我們首先檢查頁面是否具有規範URL，如果具有，則使用該URL。否則，我們從document.location獲取href 。

提供回退是個好主意

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

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

我們要做的是為不支持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>

現在，無論用戶使用什麼瀏覽器，所有用戶都得到了覆蓋。以下是共享按鈕在兩個移動瀏覽器上的行為比較，一個支持Web 共享API，另一個不支持：

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

總結

這涵蓋了您需要了解的關於Web 共享API 的幾乎所有基礎知識。通過在您的網站上實現它，訪問者可以更輕鬆地通過各種社交網絡、聯繫人和其他原生應用程序共享您的內容。

還值得注意的是，如果您的Web 應用程序滿足漸進式Web 應用程序安裝標準並添加到用戶的主屏幕，則您可以將其添加為共享目標。這是您可以閱讀Google Developers 上的Web 共享目標API 的一項功能。

儘管瀏覽器支持參差不齊，但回退很容易實現，所以我認為沒有理由更多網站不採用它。如果您想了解更多關於此API 的信息，您可以在這裡閱讀規範。

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

以上是如何使用Web共享API的詳細內容。更多資訊請關注PHP中文網其他相關文章！