我認為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') 
    } 
  ); 
} 

你也可以將字符串傳遞給這些值，這只是在展示你如何在任何頁面上動態(tài)地做一些工作。

Jeremy也一直在倡導建立一個JavaScript可選的Web Share API版本，他認為可以像這樣工作。

<button type="share"> 

然后，指定標題和文本：

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

用逗號對我來說有點時髦，如果標題中包含逗號怎么辦?那指定URL呢?我們可以將它們?nèi)糠殖蓪傩詥?我想我知道Jeremy會說什么：這是一個簡單的聲明性版本，如果你想改變默認行為，那就是JavaScript的作用。

如何使用Web Share API

自從在Android的Chrome 61中首次引入以來，Web Share API似乎已經(jīng)受到關(guān)注。從本質(zhì)上講，它提供了一種方法，當直接從網(wǎng)站或Web應用程序分享內(nèi)容時，可以觸發(fā)設備(或桌面，如果使用Safari)的本地分享對話框，例如鏈接或聯(lián)系卡。

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

與傳統(tǒng)方法相比，這種方法具有許多優(yōu)勢：

• 與你在DIY實現(xiàn)中可能擁有的有限數(shù)量的內(nèi)容相比，用戶將獲得廣泛的內(nèi)容分享選擇。
• 你可以通過刪除各個社交平臺上的第三方腳本來縮短頁面加載時間。
• 你不需要為不同的社交媒體網(wǎng)站和電子郵件添加一系列按鈕，一個按鈕就足以觸發(fā)設備的原生分享選項。
• 用戶可以在自己的設備上定制自己喜歡的分享目標，而不是僅僅局限于預定義的選項。

關(guān)于瀏覽器支持的說明

在介紹API的工作細節(jié)之前，我們先把瀏覽器支持的問題解決掉。說實話，目前瀏覽器的支持度并不高。它只適用于Android版Chrome瀏覽器，以及Safari(桌面和iOS)。

但不要因此而不愿意在網(wǎng)站上采用這個API。要實現(xiàn)一個支持不提供支持的瀏覽器的后備功能是很容易的，你會看到的。

使用它的一些要求

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

• 您的網(wǎng)站必須通過HTTPS提供服務。為了促進本地開發(fā)，當您的站點通過localhost運行時，該API也可以使用。
• 為了防止濫用，API只能在響應一些用戶操作(如點擊事件)時觸發(fā)。

這是一個例子

為了演示如何使用這個API，我準備了一個demo，它的工作原理與我的網(wǎng)站上的工作原理基本相同。該示例使用DIY方式，自己自定義分享對話框。

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

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

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

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

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

• url：一個字符串，代表要共享的URL。通常是文檔的網(wǎng)址，但不是必須的。您可以通過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 
  } 
}); 

這時，一旦在支持的瀏覽器中點擊分享按鈕，原生選取器就會彈出所有用戶可以分享數(shù)據(jù)的可能目標。目標可以是社交媒體應用、電子郵件、即時通訊、短信或其他注冊分享目標。

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，我們首先檢查該頁面是否有一個規(guī)范的URL，如果有，就使用它。否則，我們從 document.location 中抓取 href。

提供后備方案是個好主意

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

在上面的DIY例中，我們彈出一個對話框，其中有一些用于共享內(nèi)容的選項，并且演示中的按鈕實際上并沒有鏈接到任何地方，因為這是一個演示。但是，如果您想了解如何在不使用第三方腳本的情況下創(chuàng)建自己的鏈接來共享網(wǎng)頁，那么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'); 
  } 
}); 

現(xiàn)在，無論使用哪種瀏覽器，所有用戶都將受到覆蓋。以下是分享按鈕在兩個移動瀏覽器上的表現(xiàn)比較，一個是支持Web Share API，另一個是不支持。

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

結(jié)束

這幾乎涵蓋了您需要了解的有關(guān)Web Share API的基本內(nèi)容。通過在您的網(wǎng)站上實施它，訪問者可以在更廣泛的社交網(wǎng)絡上更容易地與聯(lián)系人和其他原生應用程序分享您的內(nèi)容。

另外值得注意的是，如果你的Web應用符合WPA Web應用安裝標準，你能夠?qū)⑵涮砑訛楣蚕砟繕?，并添加到用戶的主屏幕上。Web Share Target API的此功能，您可以在Google Developers上了解。

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