- 原文作者：Serg Hospodarets
- 譯文出自：掘金翻譯計(jì)劃
- 譯者：Jiang Haichao
- 校對(duì)者：xilihuasi,IridescentMia
多年來新思，Web 一直向著與移動(dòng)原生應(yīng)用等價(jià)的方向發(fā)展纲熏，并且新增了許多以前沒有的特性。
如今刻恭，瀏覽器支持了其中的大部分特性趁耗，從離線模式到用 Service Workers 增強(qiáng)體驗(yàn)以及 Geolocation 和 NFC乌逐。
但有一種已經(jīng)在移動(dòng)應(yīng)用上廣泛使用的重要功能仍然缺失玛荞，那就是分享頁面秉沼、文章或一些特定數(shù)據(jù)的功能梭冠。
Web 分享 API 是填補(bǔ)這種缺失的第一步辕狰，它將把原生的分享能力帶到 Web 端。
為什么需要新的 API
前幾年控漠，在移動(dòng) Web 應(yīng)用上嘗試實(shí)現(xiàn)了一些 API/協(xié)議 能夠?qū)崿F(xiàn)分享功能：
1）Web Intents 在 Chrome 15 引入并實(shí)現(xiàn)蔓倍，但在 Chrome 24 中廢棄
2）也有許多自定義 URL 的解決方法：
- Android Intent：URL悬钳。這是個(gè)強(qiáng)大的 API，但僅限 Android 并且用 在分享上有許多問題偶翅。
- 在 macOs 或 iOS 上自定義 URL Schema 也能運(yùn)行并且支持良好默勾，但是和 Android 解法有相似的問題存在。
- Mozilla 曾提出了 Web Activities 方案聚谁，但是已經(jīng)被淘汰母剥，不再支持了。
所以現(xiàn)在的情況是形导，沒有 API 能夠支持 Web 上簡單的內(nèi)容分享功能环疼。
但是用戶需要一個(gè)快速分享的方式，能夠方便地把 網(wǎng)址/文本/圖片 等數(shù)據(jù)分享到他們喜歡的 app 和服務(wù)上朵耕。
現(xiàn)在的能提供的是：
針對(duì)特定服務(wù)的分享按鈕（將導(dǎo)致眾多服務(wù)和內(nèi)容整合商僅提供分享按鈕的 API）
許多瀏覽器和應(yīng)用程序提供自己特定的分享按鈕炫隶。
但仍然沒有從 Web 應(yīng)用程序分享內(nèi)容的簡便方法。
Web 分享 API
如今的 Web 分享 API 是基于 Promise 的非阻塞API 的最佳實(shí)踐阎曹。
正如其他大多數(shù)分享 API 一樣伪阶，你能夠分享的數(shù)據(jù)包括 title, url 和 text（三者至少一項(xiàng)為必填項(xiàng)）。
下面是允許分享圖片數(shù)據(jù)或/和文件對(duì)象的方案处嫌。
如下所示：
function onShareClick(photo){
// WEB SHARE API
navigator.share({
title: 'Checkout this funny photo',
text: '',
url: window.location.origin + '/' + photo.id
})
.then(() => console.log('Successfully shared'))
.catch((error) => console.log('Error sharing:', error));
}
如你所見栅贴，這個(gè) API 相當(dāng)簡單，并且目前為止接收至少一個(gè)以下字段：
-
title（string）： 被分享文檔的標(biāo)題（可能會(huì)被處理程序忽略）锰霜。 -
text（string）：形成分享消息主體的文本筹误。 -
url（string）：被分享資源的 URL / URI 地址。
這個(gè)方法返回一個(gè) Promise癣缅。
如果用戶選擇了目標(biāo)應(yīng)用程序厨剪，它會(huì)被 resolve，同時(shí)目標(biāo)應(yīng)用成功接收數(shù)據(jù)友存。
Promise 被 reject 的情況有如下幾種：
- 分享的是不可用數(shù)據(jù)（例如：傳遞錯(cuò)誤字段）
- 用戶取消對(duì)話框祷膳，或者沒有目標(biāo)應(yīng)用
- 數(shù)據(jù)不能被傳遞到目標(biāo)應(yīng)用
分享的數(shù)據(jù)
網(wǎng)站上傳遞到 navigator.share 的所有字段通常都有許多預(yù)定義的值。
例如屡立，流行的 Open Graph Markup直晨。
如果你的網(wǎng)站在使用它，那么你想分享網(wǎng)頁數(shù)據(jù)時(shí)能夠容易地重用值膨俐。
我在下面的 demo 中使用了這個(gè)方法：
function getOpenGraphData(property){
return document.querySelector(`meta[property="${property}"]`)
.getAttribute('content');
}
const sharePage = () => {
navigator.share({
title: getOpenGraphData('og:title'),
text: getOpenGraphData('og:description'),
url: getOpenGraphData('og:url')
}) //...
}
這里有一個(gè)視頻示范如何使用它
（點(diǎn)擊分享按鈕 ?? tweet ?? 在 Twitter 上新增的 tweet）：
絕大多數(shù)情況下勇皇，如果你想擁有從任何頁面分享數(shù)據(jù)的能力，但是并不確定是 Open Graph 還是其他標(biāo)簽焚刺，
這里有一個(gè)通用方案：
navigator.share({
title: document.title,
url: document.querySelector('link[rel=canonical]') ?
document.querySelector('link[rel=canonical]').href :
window.location.href
})
link[rel=canonical] 代表可選但是更通用的 <link> 元素敛摘，
意思是使用這個(gè)元素內(nèi) href 標(biāo)簽指向的 URL。 如果網(wǎng)站的 URL 有例如 mobile 的前綴或者其他內(nèi)容乳愉，則這個(gè) URL 不應(yīng)該被分享兄淫。
如果沒有提供規(guī)范 link屯远，那么分享的就是默認(rèn) URL。
最新建議捕虽，如果不可用的話（瀏覽器不支持慨丐，設(shè)備沒有分享功能等），別忘了禁用或撤銷分享功能泄私。
if(!navigator.share){
shareButton.hidden = true;
return;
}
// SHARE CODE
要求
現(xiàn)在房揭，Web 分享 API 在 Android 上穩(wěn)定的 Chrome 版本中已經(jīng)可用。
但首先挖滤，要求 HTTPS 環(huán)境崩溪，其次，在 Origin Trial 下可用斩松。
簡而言之伶唯，Origin Trial 使得開發(fā)者能夠在固定一段時(shí)間內(nèi)啟用 API。
這將給予供應(yīng)商和 API 作者/提供商 反饋惧盹。
你可以把它理解為你的網(wǎng)站可以在瀏覽器下啟用分享的一個(gè)標(biāo)志乳幸。
你可以在這里找到一些可用的嘗試 here。
要啟用 Web 分享 API钧椰，你需要：
- 登錄并獲取試用 token
- 24 小時(shí)內(nèi)粹断，你將收到一封郵件，里面包含試用 Token 和如何在 Web 應(yīng)用中使用的說明
- 在 header 中或者直接在網(wǎng)頁的 HTML嫡霞，全局任何你想使用這個(gè) API 的地方加上下面這段代碼
<metahttp-equiv="origin-trial"data-feature="Web Share"content="TOKEN_FROM_THE_EMAIL">
Web 分享試用在 Chrome 55 上引入了瓶埋，將支持到 2017 年 4 月，在那之后也許會(huì)在瀏覽器中默認(rèn)開啟诊沪。
總結(jié)一下啟用 Web 分享 API 的步驟：
- 網(wǎng)站在 HTTPS 環(huán)境下
- 把 origin trial 相關(guān)的 header/meta 加入到頁面上
- 用戶行為（點(diǎn)擊养筒，觸摸）觸發(fā)并調(diào)用
navigator.share()
總結(jié)
隨著 Web 的發(fā)展，移動(dòng) Web 與原生應(yīng)用之間的界限越來越模糊端姚，Web 分享 API 就是革命的下一步晕粪，如今你就可以使用了。
未來的工作將圍繞跨平臺(tái) API 的實(shí)現(xiàn)渐裸，圖片數(shù)據(jù)的提供或者文件（二進(jìn)制對(duì)象）的分享巫湘。
同時(shí)，不僅限于發(fā)送昏鹃，關(guān)于 Web 應(yīng)用的分享接收也有一個(gè)討論尚氛。
在 Web 分享目標(biāo) API 中，我們也許能了解更多分享之后的事情洞渤。
最后怠褐，以下是一份有用的鏈接清單：
