Web上的分享（Share）API

我認爲Web Share API很是酷，簡而言之，它會利用您所使用的平臺上的原生共享功能（若是該平臺支持的話）。

我喜歡這個：

遠遠不止這些東西：

爲何？

• Web Share API只是幾行代碼。簡單！沒有圖像，沒有重量級的JavaScript或iframe。
• 用戶看到的UI是針對其平臺定製的，甚至多是由他們定製的，以在其中包含他們想要的東西。

好樣的，Web標準。

但並非全部地方都支持。例如，我在Chrome瀏覽器中寫這篇博客文章，在桌面Chrome瀏覽器中沒法使用，但在桌面的Safari中卻能夠工做

因此，若是我要使用它，我寧願在把按鈕放在頁面上以前先測試一下是否支持。這是很是簡單的：

if (navigator.share) {

}

下面是一個例子，若是API被支持的話，我把一個 <button> 放在文章上，HTML和CSS省略。

JavaScript作了一些花哨的動做來獲取文章的標題和第一段，以便在API中使用。我喜歡Jeremy Keith在頁面上的作法：

if (navigator.share) {
  navigator.share(
    {
      title: document.querySelector('title').textContent,
      text: document.querySelector('meta[name="description"]').getAttribute('content'),
      url: document.querySelector('link[rel="canonical"]').getAttribute('href')
    }
  );
}

你也能夠將字符串傳遞給這些值，這只是在展現你如何在任何頁面上動態地作一些工做。

Jeremy也一直在倡導創建一個JavaScript可選的Web Share API版本，他認爲能夠像這樣工做。

<button type="share">

而後，指定標題和文本：

<button type="share" value="title,text">

用逗號對我來講有點時髦，若是標題中包含逗號怎麼辦？那指定URL呢？咱們能夠將它們所有分紅屬性嗎？我想我知道Jeremy會說什麼：這是一個簡單的聲明性版本，若是你想改變默認行爲，那就是JavaScript的做用。

如何使用Web Share API

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

雖然用戶已經能夠經過原生方式分享網頁上的內容，但他們必須在瀏覽器菜單中找到這個選項，即便如此，也沒法控制分享的內容。該API的引入讓開發者能夠利用用戶設備上的原生內容分享功能，將分享功能添加到應用或網站中。

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

• 與你在DIY實現中可能擁有的有限數量的內容相比，用戶將得到普遍的內容分享選擇。
• 你能夠經過刪除各個社交平臺上的第三方腳原本縮短頁面加載時間。
• 你不須要爲不一樣的社交媒體網站和電子郵件添加一系列按鈕，一個按鈕就足以觸發設備的原生分享選項。
• 用戶能夠在本身的設備上定製本身喜歡的分享目標，而不是僅僅侷限於預約義的選項。

關於瀏覽器支持的說明

在介紹API的工做細節以前，咱們先把瀏覽器支持的問題解決掉。說實話，目前瀏覽器的支持度並不高。它只適用於Android版Chrome瀏覽器，以及Safari（桌面和iOS）。

但不要所以而不肯意在網站上採用這個API。要實現一個支持不提供支持的瀏覽器的後備功能是很容易的，你會看到的。

使用它的一些要求

在您本身的Web項目上採用此API以前，須要注意兩點：

• 您的網站必須經過HTTPS提供服務。爲了促進本地開發，當您的站點經過localhost運行時，該API也可使用。
• 爲了防止濫用，API只能在響應一些用戶操做（如點擊事件）時觸發。

這是一個例子

爲了演示如何使用這個API，我準備了一個demo，它的工做原理與個人網站上的工做原理基本相同。該示例使用DIY方式，本身自定義分享對話框。

此時，一旦點擊分享按鈕，就會彈出一個對話框，顯示出分享內容的幾個選項，這是代碼的一部分，可幫助咱們實現這一目標：

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。一般是文檔的網址，但不是必須的。您能夠經過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
  }
});

這時，一旦在支持的瀏覽器中點擊分享按鈕，原生選取器就會彈出全部用戶能夠分享數據的可能目標。目標能夠是社交媒體應用、電子郵件、即時通信、短信或其餘註冊分享目標。

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，若是有，就使用它。不然，咱們從 document.location 中抓取 href。

提供後備方案是個好主意

在不支持Web Share API的瀏覽器中，咱們須要提供一種後備機制，以便那些瀏覽器上的用戶仍然可使用一些共享選項。

在上面的DIY例中，咱們彈出一個對話框，其中有一些用於共享內容的選項，而且演示中的按鈕實際上並無連接到任何地方，由於這是一個演示。可是，若是您想了解如何在不使用第三方腳本的狀況下建立本身的連接來共享網頁，那麼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，另外一個是不支持。

試試吧！使用支持Web Share的瀏覽器和不支持的瀏覽器。它的工做原理應該與上面的演示相似。

結束

這幾乎涵蓋了您須要瞭解的有關Web Share API的基本內容。經過在您的網站上實施它，訪問者能夠在更普遍的社交網絡上更容易地與聯繫人和其餘原生應用程序分享您的內容。

另外值得注意的是，若是你的Web應用符合WPA Web應用安裝標準，你可以將其添加爲共享目標，並添加到用戶的主屏幕上。Web Share Target API的此功能，您能夠在Google Developers上了解。

儘管對瀏覽器的支持很少，但回退很容易實現，所以我認爲沒有理由不採用這種方式。

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

---

原文：https://css-tricks.com/how-to...