Service Worker學習與實踐（二）——PWA簡介
這周， Chrome 70 正式版本釋出， Progressive Web Apps（PWA） 已經正式支援到 Windows 10 平臺，然而，早在前幾個版本之前， Chrome 就已經通過 chrome://flags 支援開啟實驗性的功能，早就支援在 Windows 10 平臺上安裝 Progressive Web Apps（PWA） 。谷歌表示安裝在桌面的網頁應用使用體驗非常接近於本地應用，並且應用的服務商可以快取所有資源因此這些PWA應用有很好的相容性和可靠性。
在上一篇文章 ofollow,noindex">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 。