系列文章：
- Service Workers 和離線緩存
- Notification with Service Workers push events
- PWA：添加應(yīng)用至桌面及分享(本文)
繼上兩篇離線緩存和發(fā)送通知之后，這篇是 PWA(progressive web apps) 相關(guān)的第三篇，也是計(jì)劃中的最后一篇。
這篇將講述如何為應(yīng)用添加兩個(gè)小功能——添加應(yīng)用至桌面和分享。雖然，這兩個(gè)功能實(shí)現(xiàn)起來(lái)相當(dāng)簡(jiǎn)單，可以說(shuō)是沒(méi)有什么代碼量，但是，不要小看了這兩個(gè)小功能，它們有可能會(huì)改變大格局。
本篇主要包含以下內(nèi)容：
<a name="add-to-home-screen"></a>
添加應(yīng)用至桌面
如果，你想要為你的網(wǎng)站添加添加到桌面這個(gè)功能，那么，你的網(wǎng)站只需滿足以下 3 項(xiàng)就足夠了：
- 包含一個(gè)
manifest.json文件，其中包含short_name以及icons字段 - 包含 service sorkers
- 使用 HTTPS（這個(gè)好像是廢話，既然使用了 service workers，那肯定已經(jīng)基于 https了）
除此之外，chrome 會(huì)替你處理。
從上面 3 點(diǎn)可以看到，如果你的應(yīng)用已經(jīng)是個(gè) PWA 應(yīng)用的話，那么，第二，第三點(diǎn)就已經(jīng)滿足了，添加至桌面的功能其實(shí)只需為項(xiàng)目添加一個(gè)描述性的配置文件 manifest.json 就可以了。
那 manifest.json 這東西到底是啥？
它是 PWA 的一部分，是一個(gè) JSON 格式的文件用來(lái)描述應(yīng)用相關(guān)的信息，目的是提供將應(yīng)用添加至桌面的功能，從而使用戶可以無(wú)需下載就可以如應(yīng)用一般從桌面打開(kāi) web 應(yīng)用，大大增強(qiáng)用戶體驗(yàn)和粘性。
manifest 正處于 W3C 的草案階段，并且 Chrome 和 Firefox 已經(jīng)實(shí)現(xiàn)了這個(gè)功能，微軟系也在開(kāi)發(fā)中，只剩蘋(píng)果系還在考慮。（大致和 service workers 的進(jìn)程一樣）
知道了 manifest 是什么，接著就來(lái)看一下它怎么用，也就是可以配置哪些字段：
-
short_name: 應(yīng)用展示的名字 -
icons: 定義不同尺寸的應(yīng)用圖標(biāo) -
start_url: 定義桌面啟動(dòng)的 URL -
description: 應(yīng)用描述，可以參考 meta 中的 description -
display: 定義應(yīng)用的顯示方式，有 4 種顯示方式，分別為：-
fullscreen: 全屏 -
standalone: 應(yīng)用 -
minimal-ui: 類似于應(yīng)用模式，但比應(yīng)用模式多一些系統(tǒng)導(dǎo)航控制元素，但又不同于瀏覽器模式 -
browser: 瀏覽器模式，默認(rèn)值
-
-
name: 應(yīng)用名稱 -
orientation: 定義默認(rèn)應(yīng)用顯示方向，豎屏、橫屏 -
prefer_related_applications: 是否設(shè)置對(duì)應(yīng)移動(dòng)應(yīng)用，默認(rèn)為false -
related_applications: 獲取移動(dòng)應(yīng)用的方式 -
background_color: 應(yīng)用加載之前的背景色，用于應(yīng)用啟動(dòng)時(shí)的過(guò)渡 -
theme_color: 定義應(yīng)用默認(rèn)的主題色 -
dir: 文字方向，3 個(gè)值可選ltr(left-to-right),rtl(right-to-left) 和auto(瀏覽器判斷)，默認(rèn)為auto -
lang: 語(yǔ)言 -
scope: 定義應(yīng)用模式下的路徑范圍，超出范圍會(huì)已瀏覽器方式顯示
需要注意的是自 background_color 開(kāi)始的屬性只有部分瀏覽器支持。
如果，你不知如何設(shè)置這些值，你可以試一試 Manifest Generator，它會(huì)一步步指引你生成一個(gè)包含應(yīng)用主要信息的 manifest.json 文件。
除了以上列舉的這些值，可能還包含其他一些某些瀏覽器特定的值，比如上一篇中提到的 gcm_sender_id, applicationServerKey 用于 chrome 下訂閱服務(wù)器消息。
下面就是項(xiàng)目 manifest.json 最終的樣子。
// manifest.json
{
"dir": "ltr",
"lang": "en",
"name": "D.D Blog",
"scope": "/",
"display": "standalone",
"start_url": "/",
"short_name": "D.D Blog",
"theme_color": "transparent",
"description": "Share More, Gain More. - D.D Blog",
"orientation": "any",
"background_color": "transparent",
"related_applications": [],
"prefer_related_applications": false,
"icons": [{
"src": "assets/img/logo/size-32.png",
"sizes": "32x32",
"type": "image/png"
}, {
"src": "assets/img/logo/size-48.png",
"sizes": "48x48",
"type": "image/png"
} //...
],
"gcm_sender_id": "...",
"applicationServerKey": "..."
}
生成后的文件可以通過(guò) Web Manifest Validator 進(jìn)行驗(yàn)證。驗(yàn)證通過(guò)后，把它加入到項(xiàng)目，再次訪問(wèn)就會(huì)有添加到桌面的提示。
確定之后就能在桌面上看到了應(yīng)用圖標(biāo)了。失手點(diǎn)了關(guān)閉也沒(méi)有關(guān)系，可以通過(guò) chrome 右上角的 ... -> Add to Home sceen 手動(dòng)添加。
點(diǎn)擊添加桌面后，如果發(fā)現(xiàn)桌面沒(méi)有應(yīng)用圖標(biāo)，確認(rèn) chrome 是否有添加桌面快捷方式的權(quán)限。
另外，通過(guò)媒體查詢可以根據(jù)不同的 display 模式來(lái)應(yīng)用不同的 CSS 樣式。
還有一點(diǎn)需要特別注意，用戶將應(yīng)用添加到桌面后，你修改 minifest.json 文件將不會(huì)生效，除非用戶重新將它添加到桌面，所以，盡量還是一步到位。
如果這篇到這里就結(jié)束就未免有點(diǎn)太短了，有點(diǎn)不太符合我有事沒(méi)事往長(zhǎng)里寫(xiě)的風(fēng)格。前一陣正好看到一篇關(guān)于 web 分享 API 的文章，雖然，它不屬于 PWA 的一系列技術(shù)中，但它實(shí)現(xiàn)的功能和理念與 PWA 相當(dāng)相似——漸進(jìn)式地提供功能。這里就放在一起講一講，也順便給自己的博客添加這個(gè)功能。
<a name="web-share-api"></a>
Web Share API
Web Share API 和 PWA 一樣是一項(xiàng)由古哥提出的草案，現(xiàn)還未被納入 W3C。通過(guò) Web Share API，用戶可以方便地將內(nèi)容或數(shù)據(jù)分享到應(yīng)用中。
不過(guò)，現(xiàn)在只有安卓 Chrome 55 以上支持 Web Share API。另外，要使用分享功能，還要滿足以下幾點(diǎn)：
- 網(wǎng)站必須基于 HTTPS
- 注冊(cè) Origin Trial，并將生成的 token 加入頁(yè)面 meta 中
- 提供
text或url中的一項(xiàng)，且值必須為字符串 - 分享事件必須由用戶事件觸發(fā)
滿足了這些剩下的就很簡(jiǎn)單了，只需監(jiān)聽(tīng)用戶事件，然后將需要分享的內(nèi)容傳遞給 Web Share API 就可以了。
// CommonService.js
export const isSupportShareAPI = () => !!navigator.share;
export const sharePage = () => {
navigator
.share({
title: document.title,
text: document.title,
url: window.location.href
})
.then(() => console.info('Successful share.'))
.catch(error => console.log('Error sharing:', error));
};
如果，你的網(wǎng)站設(shè)有元數(shù)據(jù)，那么，分享的內(nèi)容可以從網(wǎng)頁(yè)元數(shù)據(jù)中獲取。
由于，Web Share 是由 chrome 團(tuán)隊(duì)單方面提出，即使是在 chrome 下也是實(shí)驗(yàn)性支持，之后是否會(huì)永久支持尚未定論，不排除以后不再支持的可能。
這次分享的兩個(gè)功能：添加到桌面和分享至應(yīng)用就這樣搞定了，加之前兩次分享的離線緩存以及推送通知，就完成了現(xiàn)有 PWA 應(yīng)用所包含的全部功能。
<a name="bullshit-or-prediction"></a>
Bullshit or Prediction
總體來(lái)說(shuō)，實(shí)現(xiàn) PWA 的功能并不困難，甚至可以說(shuō)是簡(jiǎn)單。但就如同文章之初所說(shuō)，這可能是一個(gè)影響移動(dòng)端格局的技術(shù)。在此之前，web 技術(shù)只用應(yīng)用于瀏覽器中，無(wú)論做什么之前都得先打開(kāi)瀏覽器。然而，PWA 所提供添加至桌面、推送消息及離線緩存這些功能，使得對(duì)用戶來(lái)說(shuō)網(wǎng)頁(yè)應(yīng)用和移動(dòng)應(yīng)用真的是分不清楚，也不必分清楚...
當(dāng)然，要使用戶有使用應(yīng)用的感覺(jué)，這里就得提一提另一個(gè)東西，那就是設(shè)計(jì)。在將網(wǎng)站轉(zhuǎn)換為 PWA 的同時(shí)，這個(gè)轉(zhuǎn)變不應(yīng)只發(fā)生在 JS 方面，用戶感受最明顯的還是網(wǎng)站的外觀，也就是用戶界面。界面設(shè)計(jì)也應(yīng)隨著網(wǎng)站轉(zhuǎn)換成 PWA 而進(jìn)行重新設(shè)計(jì)，從而給用戶真正帶來(lái)類應(yīng)用的體驗(yàn)。我個(gè)人認(rèn)為如果 PWA 順利推行，那么，網(wǎng)站的界面設(shè)計(jì)同時(shí)也會(huì)迎來(lái)一次巨大革新，就如同之前 jsp 到單頁(yè)應(yīng)用般巨大的改變。
不過(guò)，這里還是得澆一盆冷水，鑒于我國(guó)網(wǎng)絡(luò)現(xiàn)狀，我同這篇回答中的觀點(diǎn)基本一致，就我國(guó)蘋(píng)果機(jī)的占比來(lái)說(shuō)，如果蘋(píng)果不支持 PWA，那么，它也就只有自己拿來(lái)玩玩了。
倘若，蘋(píng)果也加入到 PWA 的行列，瀏覽器兼容性不再成為障礙時(shí)，PWA 必然會(huì)改變前端與移動(dòng)端之間的格局，再加之 AOT(ahead-of-time) 與 WebAssembly 為 JS 帶來(lái)的性能上的突破，JS 將撼動(dòng)所有領(lǐng)域，從移動(dòng)端（PWA），到桌面應(yīng)用，物聯(lián)網(wǎng)，VR，AR，游戲，乃至人工智能等等，畫(huà)美不看。
妄言或許會(huì)成預(yù)言。
Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.
我們正處于一個(gè)前端最好的時(shí)代，未來(lái)可期...
扯了這么多，最后當(dāng)然還是希望對(duì)本人博客有興趣的小伙伴可以試一試這次分享的兩個(gè)功能，把本人博客添加到桌面并分享給自己的小伙伴們。??????
支持離線查看噢（得先訪問(wèn)過(guò)），沒(méi)網(wǎng)的時(shí)候也能漲姿勢(shì)了哪...(不用連啥花生 wifi 之類的了[手動(dòng)滑稽])
