如何使用Web Share API

翻譯：瘋狂的技術宅

原文：css-tricks.com/how-to-use-…

未經容許嚴禁轉載

Web Share API 自從它首次在Android 版 Chrome 61中推出以來，彷佛已經再也不受到關注。從本質上講，它提供了一種方法，能夠直接從網站或 Web 應用中共享內容（例如連接或聯繫人卡片）時觸發設備（若是使用 Safari 桌面也能夠）的本機共享對話框。

雖然用戶已經能夠經過本地方式從網頁共享內容，但他們必須在瀏覽器菜單中找到該選項，即便這樣，也沒法控制共享內容。此API的引入容許開發人員經過利用用戶設備上的本機內容共享功能，將共享功能添加到 APP 或網站中。

與傳統方法相比，這種方法具備許多優勢：

• 向用戶提供了多種共享內容的選項。
• 能夠經過取消各個社交平臺的第三方腳原本改善頁面加載時間。
• 無需爲不一樣的社交媒體網站和電子郵件添加一系列按鈕。單個按鈕足以觸發設備的本機共享選項。
• 用戶能夠在本身的設備上自定義他們的首選共享目標，而是不只限於預約義的選項。

關於瀏覽器支持

在咱們深刻了解 API 的工做原理以前，先要解決瀏覽器支持問題。說實話，目前瀏覽器支持不是很好。它僅適用於 Android 版 Chrome 和 Safari（桌面版和iOS版）。

下面的瀏覽器支持數據來自Caniuse，其中包含更多詳細信息。數字表示瀏覽器支持該版本及以上版本的功能。

桌面

Chrome	Opera	Firefox	IE	Edge	Safari
No	No	No	No	No	12.1

手機/平板電腦

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
12.2	No	No	No	74	No

可是不要讓這些阻止你在本身的網站上使用此 API。正如你所看到的，在不支持的瀏覽器上很容易實現備用方案。

使用它的一些要求

要在你本身的 Web 項目中使用這個 API ，有兩件事須要注意：

• 你的網站必須經過 HTTPS 進行訪問。爲了便於本地開發，當你的站點在 localhost 上運行時，API也能夠運行。
• 爲了防止濫用，只能在響應某些用戶操做時（例如 click 事件）觸發API。

這是一個例子

To demonstrate how to use this API, I’ve prepared a demo that works essentially the same as it does on my site. Here’s how it looks like:

爲了演示如何使用這個 API，我準備了一個demo，它與個人網站上的工做方式基本相同。這是它的樣子：

CodePen上的演示：codepen.io/ayoisaiah/p…

See the Pen WebShare API Demo - Start by Ayooluwa ( @ayoisaiah) on CodePen.

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

shareButton.addEventListener('click', event => { 
  shareDialog.classList.add('is-open'); 
});
複製代碼

讓咱們在此示例轉的基礎上更改使用 Web Share API。首先要檢查用戶的瀏覽器是否支持該 API，以下所示：

if (navigator.share) { 
  // Web Share API is supported 
} else { 
  // Fallback 
}
複製代碼

使用 Web Share API 就像調用 navigator.share() 方法同樣簡單，調用時須要傳遞包含如下至少一個字段的對象：

• url：表示要共享的 URL 的字符串。一般是頁面的URL，但也不必定。你能夠經過 Web Share API 共享任何URL。
• title：表示要共享的標題的字符串，一般是 document.title。
• text：你要包含的任何文字。

如下是實踐中的表現：

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 { 
    // fallback 
  } 
});
複製代碼

此時，一旦在支持的瀏覽器中單擊了共享按鈕，本機選擇器將彈出用戶可與之共享數據的全部可能目標。目標能夠是社交媒體應用、電子郵件、即時消息、SMS或其餘已註冊的共享目標。

API 是基於 promise 的，所以你能夠附加一個 .then() 方法，若是共享成功，可能會顯示成功消息，並用 .catch() 進行錯誤處理。在實際場景中，你可能但願使像如下代碼段同樣去獲取頁面的標題和 URL：

const title = document.title; 
const url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;
複製代碼

對於 URL，咱們首先檢查頁面是否具備規範的 URL，若是是，則使用該 URL。不然從 document.location 中獲取 href。

提供備選方案是一個好主意

在不支持Web Share API的瀏覽器中，咱們須要提供備用機制，以便這些瀏覽器上的用戶仍然能夠得到一些共享選項。

在咱們的例子中，有一個對話框，彈出一些共享內容的選項，演示中的按鈕實際上並無連接到任何地方，由於它只是一個演示。可是若是你想了解如何創經過建本身的連接在沒有第三方腳本的狀況下共享網頁，Adam Coti 的文章 爲你提供了一個很好的思路。

咱們想要作的是在不支持 Web Share API 的狀況下在瀏覽器上顯示備用的對話框。這就像把打開共享對話框的代碼移動到 else 塊中同樣簡單：

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'); 
  } 
});
複製代碼

如今，不管使用哪一種瀏覽器，均可以覆蓋全部用戶。如下是兩個移動瀏覽器上共享按鈕行爲的比較，一個支持Web Share API，另外一個沒有：

在 Android 設備上測試支持該功能的共享按鈕。 按下共享按鈕時會觸發 Android 的本機共享選項。 第二個測試顯示在不支持該功能的 Android 設備上單擊了貢獻按鈕。 這會產生手動添加的後備共享選項。

到 CodePen 上分別使用支持和不支持 Web Share 的瀏覽器去嘗試一下！（codepen.io/ayoisaiah/p…

See the Pen WebShare API Demo - End by Ayooluwa ( @ayoisaiah) on CodePen.

總結

本文幾乎涵蓋了有關 Web Share API 的全部內容。把它加到你的網站上，訪問者能夠更輕鬆地經過聯繫人或其餘原生應用在更多的社交網絡上共享你的內容。

值得注意的是，若是你的 Web 應用符合漸進式 Web 應用的安裝條件 ，則能夠將作爲共享目標添加到用戶的主屏幕上。這是Web Share Target API 的一項功能，你能夠在Google Developers上閱讀相關內容。

雖然支持的瀏覽器不少，但很容易實現後備方案，因此我認爲沒有理由不該該採用這種方式。若是你想了解有關此 API 的更多信息，能夠閱讀此處的規範。

你是否用過 Web Share API？請在評論中分享。

##歡迎關注前端公衆號：前端先鋒，獲取前端工程化實用工具包。