Service Worker學習與實踐（二）——PWA簡介

這周， 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版本以前，須要手動開啓實驗性功能，步驟以下：

1. 進入chrome://flags
2. 找到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。