我認為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上了解。

盡管對瀏覽器的支持不多，但回退很容易實現，因此我認為沒有理由不采用這種方式。