這周，
Chrome 70正式版本釋出，Progressive Web Apps（PWA）已經正式支援到Windows 10平臺，然而，早在前幾個版本之前，Chrome就已經通過chrome://flags支援開啟實驗性的功能，早就支援在Windows 10平臺上安裝Progressive Web Apps（PWA）。谷歌表示安裝在桌面的網頁應用使用體驗非常接近於本地應用，並且應用的服務商可以快取所有資源因此這些PWA應用有很好的相容性和可靠性。
在上一篇文章Service Worker學習與實踐（一）——離線快取中，已經講到Service Worker的生命週期、如何建立、啟用、更新Web應用程式的Service Worker，並且給出了一個簡單的示例來說明使用Service Worker來實現離線快取的原理，在這篇文章裡，主要是對Service Worker實現原生應用程式的能力做出一定解析，下一篇文章，將通過一個例子闡述如何使用Service Worker實現訊息推送功能。
Progressive Web Apps（PWA）
Progressive Web App, 簡稱 PWA，是提升Web App的體驗的一種新方法，能給使用者原生應用的體驗。
PWA能做到原生應用的體驗不是靠特指某一項技術，而是經過應用一些新技術進行改進，在安全、效能和體驗三個方面都有很大提升，PWA本質上是Web App，藉助一些新技術也具備了Native App的一些特性，兼具Web App和Native App的優點。
PWA的主要特點包括下面三點：
可靠 - 即使在不穩定的網路環境下，也能瞬間載入並展現
體驗 - 快速響應，並且有平滑的動畫響應使用者的操作
粘性 - 像裝置上的原生應用，具有沉浸式的使用者體驗，使用者可以新增到桌面
PWA本身強調漸進式，並不要求一次性達到安全、效能和體驗上的所有要求，開發者可以通過PWA Checklist檢視現有的特徵。
通過上面的PWA Checklist，總結起來，PWA大致有以下的優勢：
- 體驗：通過
Service Worker配合Cache Storage API，保證了PWA首屏的載入效率，甚至配合本地儲存可以支援離線應用； - 粘性：
PWA是可以安裝的，使用者點選安裝到桌面後，會在桌面建立一個 PWA 應用，並且不需要從應用商店下載，可以藉助Web App Manifest提供給使用者和Native App一樣的沉浸式體驗，可以通過給使用者傳送離線通知，讓使用者迴流； - 漸進式：適用於大多數現代瀏覽器，隨著瀏覽器版本的迭代，其功能是漸進增強的；
- 無版本問題：如
Web應用的優勢，更新版本只需要更新應用程式對應的靜態檔案即可，Service Worker會幫助我們進行更新； - 跨平臺：
Windows、Mac OSX、Android、IOS，一套程式碼，多處使用； - 訊息推送：即使使用者已經關閉應用程式，仍然可以對使用者進行訊息推送；
總的說來，只要Web應用支援的功能，對於PWA而言，基本都支援，此外，還提供了原生能力。
使用PWA manifest新增桌面入口
注意這裡說的manifest不是指的manifest快取，這個manifest是一個JSON檔案，開發者可以利用它控制在使用者想要看到應用的區域（例如移動裝置主螢幕）中如何向使用者顯示網路應用或網站，指示使用者可以啟動哪些功能，以及定義其在啟動時的外觀。
manifest提供了將網站書籤儲存到裝置主螢幕的功能。當網站以這種方式啟動時：
- 它具有唯一的圖示和名稱，以便使用者將其與其他網站區分開來。
- 它會在下載資源或從快取恢復資源時向使用者顯示某些資訊。
- 它會向瀏覽器提供預設顯示特性，以避免網站資源可用時的過渡過於生硬。
下面是我的部落格網站的manifest.json檔案，作為桌面入口配置檔案的示例：
{
"name": "Counterxing",
"short_name": "Counterxing",
"description": "Why did you encounter me?",
"start_url": "/index.html",
"display": "standalone",
"orientation": "any",
"background_color": "#ACE",
"theme_color": "#ACE",
"icons": [{
"src": "/images/logo/logo072.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "/images/logo/logo152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "/images/logo/logo192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/images/logo/logo256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "/images/logo/logo512.png",
"sizes": "512x512",
"type": "image/png"
}]
}
複製程式碼上面的欄位含義也不用多解釋了，大致就是啟動的icon樣式，應用名稱、簡寫名稱與描述等，其中必須確保有short_name和name。此外，最好設定好start_url，表示啟動的根頁面路徑，如果不新增，則是使用當前路徑。
display為standalone，則會隱藏瀏覽器的UI介面，如果設定display為browser，則啟動時儲存瀏覽器的UI介面。
orientation表示啟動時的方向，橫屏、豎屏等，具體引數值可參考文件。
background_color和theme_color表示應用程式的背景顏色和主題顏色。
在建立好manifest.json後，將、使用link標籤新增到應用程式的所有頁面上，<link rel="manifest" href="/manifest.json">
安裝到桌面
桌面端（以Mac OSX為例）
只有註冊、啟用了Service Worker的網站才能夠安裝到桌面，在Chrome 70版本之前，需要手動開啟實驗性功能，步驟如下：
- 進入
chrome://flags - 找到
Desktop PWAs，選擇Enabled
此時，進入一個支援PWA的網站（例如Google I/O），在Chrome瀏覽器右上角，點選安裝。即可安裝到桌面。這裡以我的部落格為例：
可以到awesome-pwa查詢目前支援
PWA的網站列表
接著點選安裝：
這樣，一個PWA應用就安裝到你的機器上了，這裡我的作業系統為Mac OSX，應用程式可以通過Launchpad開啟，在Windows也是同理的，會被安裝到桌面上，可通過開始選單找到應用程式。
開啟應用程式，發現其與原始應用幾乎沒有任何差距：
Windows與上述方法類似，這裡就不做過多闡述
移動端（以IOS為例）
由於當初蘋果推出PWA時，並沒有一個統一的manifest的規範，最開始的設計是通過meta和link標籤來設定應用的對應引數的，所以，在移動端上的PWA應用，為了相容Windows Phone和iPhone，需要在所有頁面的HTML的head中新增以下的標籤：
<meta name="msapplication-TileImage" content="./images/logo/logo152.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Counterxing">
<link rel="apple-touch-icon" href="./images/logo/logo152.png">
複製程式碼新增好後，就可以體驗我們的PWA了！
IOS在11.3版本之後也支援PWA了，知道這一訊息的我，解除安裝了手機上很多軟體，立刻體驗上了PWA。
這裡以豆瓣移動端為例使用Safiri瀏覽器開啟一個網站，點選下方分享圖示，選擇新增到主螢幕。
然後在新彈出的一個瀏覽器頁面，選擇新增：
就以上簡短的步驟，移動端上的一個PWA桌面應用就新增好了，趕緊體驗吧！
小結
本文是筆者寫的Service Worker學習與實踐系列文章的第二篇，主要講述的是配合Service Worker使用的PWA的優勢，如何配置manifest.json檔案來實現將PWA安裝到桌面，並通過Mac OSX和IOS如何安裝PWA到桌面的詳細步驟，闡述瞭如何配置PWA，使其方便地安裝到桌面上。
下一篇文章中，主要講述Service Worker在PWA實踐中的重要能力：Web Push。