我認為Web Share API非常酷，簡而言之，它會利用您所使用的平臺上的原生共享功能(如果該平臺支持的話)。
創(chuàng)新互聯(lián)是一家成都做網(wǎng)站、網(wǎng)站設(shè)計，提供網(wǎng)頁設(shè)計，網(wǎng)站設(shè)計，網(wǎng)站制作，建網(wǎng)站，定制網(wǎng)站建設(shè)，網(wǎng)站開發(fā)公司，從2013年成立是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價值為核心業(yè)務(wù)，全程參與項目的網(wǎng)站策劃設(shè)計制作，前端開發(fā)，后臺程序制作以及后期項目運營并提出專業(yè)建議和思路。
我喜歡這個：
遠遠不止這些東西：
為什么?
- Web Share API只是幾行代碼。簡單!沒有圖像，沒有重量級的JavaScript或iframe。
- 用戶看到的UI是針對其平臺定制的，甚至可能是由他們定制的，以在其中包含他們想要的東西。
好樣的，Web標準。
但并不是所有地方都支持。例如，我在Chrome瀏覽器中寫這篇博客文章，在桌面Chrome瀏覽器中無法使用，但在桌面的Safari中卻可以工作
所以，如果我要使用它，我寧愿在把按鈕放在頁面上之前先測試一下是否支持。這是非常簡單的：
- if (navigator.share) {
-
- }
下面是一個例子，如果API被支持的話，我把一個
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版本，他認為可以像這樣工作。
-
然后，指定標題和文本：
-
用逗號對我來說有點時髦，如果標題中包含逗號怎么辦?那指定URL呢?我們可以將它們?nèi)糠殖蓪傩詥?我想我知道Jeremy會說什么：這是一個簡單的聲明性版本，如果你想改變默認行為，那就是JavaScript的作用。
如何使用Web Share API
自從在Android的Chrome 61中首次引入以來，Web Share API似乎已經(jīng)受到關(guān)注。從本質(zhì)上講，它提供了一種方法，當直接從網(wǎng)站或Web應(yīng)用程序分享內(nèi)容時，可以觸發(fā)設(shè)備(或桌面，如果使用Safari)的本地分享對話框，例如鏈接或聯(lián)系卡。
雖然用戶已經(jīng)可以通過原生方式分享網(wǎng)頁上的內(nèi)容，但他們必須在瀏覽器菜單中找到這個選項，即使如此，也無法控制分享的內(nèi)容。該API的引入讓開發(fā)者可以利用用戶設(shè)備上的原生內(nèi)容分享功能，將分享功能添加到應(yīng)用或網(wǎng)站中。
與傳統(tǒng)方法相比，這種方法具有許多優(yōu)勢：
- 與你在DIY實現(xiàn)中可能擁有的有限數(shù)量的內(nèi)容相比，用戶將獲得廣泛的內(nèi)容分享選擇。
- 你可以通過刪除各個社交平臺上的第三方腳本來縮短頁面加載時間。
- 你不需要為不同的社交媒體網(wǎng)站和電子郵件添加一系列按鈕，一個按鈕就足以觸發(fā)設(shè)備的原生分享選項。
- 用戶可以在自己的設(shè)備上定制自己喜歡的分享目標，而不是僅僅局限于預(yù)定義的選項。
關(guān)于瀏覽器支持的說明
在介紹API的工作細節(jié)之前，我們先把瀏覽器支持的問題解決掉。說實話，目前瀏覽器的支持度并不高。它只適用于Android版Chrome瀏覽器，以及Safari(桌面和iOS)。
但不要因此而不愿意在網(wǎng)站上采用這個API。要實現(xiàn)一個支持不提供支持的瀏覽器的后備功能是很容易的，你會看到的。
使用它的一些要求
在您自己的Web項目上采用此API之前，需要注意兩點：
- 您的網(wǎng)站必須通過HTTPS提供服務(wù)。為了促進本地開發(fā)，當您的站點通過localhost運行時，該API也可以使用。
- 為了防止濫用，API只能在響應(yīng)一些用戶操作(如點擊事件)時觸發(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ù)的可能目標。目標可以是社交媒體應(yīng)用、電子郵件、即時通訊、短信或其他注冊分享目標。
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的瀏覽器和不支持的瀏覽器。它的工作原理應(yīng)該與上面的演示類似。
結(jié)束
這幾乎涵蓋了您需要了解的有關(guān)Web Share API的基本內(nèi)容。通過在您的網(wǎng)站上實施它，訪問者可以在更廣泛的社交網(wǎng)絡(luò)上更容易地與聯(lián)系人和其他原生應(yīng)用程序分享您的內(nèi)容。
另外值得注意的是，如果你的Web應(yīng)用符合WPA Web應(yīng)用安裝標準，你能夠?qū)⑵涮砑訛楣蚕砟繕?，并添加到用戶的主屏幕上。Web Share Target API的此功能，您可以在Google Developers上了解。
盡管對瀏覽器的支持不多，但回退很容易實現(xiàn)，因此我認為沒有理由不采用這種方式。
網(wǎng)站標題：Web上的分享（Share）API
瀏覽地址：
http://uogjgqi.cn/article/dhpsppi.html
