摘要：簡(jiǎn)稱，是提升的體驗(yàn)的一種新方法，能給用戶原生應(yīng)用的體驗(yàn)。當(dāng)網(wǎng)站以這種方式啟動(dòng)時(shí)它具有唯一的圖標(biāo)和名稱，以便用戶將其與其他網(wǎng)站區(qū)分開來(lái)。表示啟動(dòng)時(shí)的方向，橫屏豎屏等，具體參數(shù)值可參考文檔。下一篇文章中，主要講述在實(shí)踐中的重要能力。

這周，Chrome 70正式版本發(fā)布，Progressive Web Apps（PWA）已經(jīng)正式支持到Windows 10平臺(tái)，然而，早在前幾個(gè)版本之前，Chrome就已經(jīng)通過(guò)chrome://flags支持開啟實(shí)驗(yàn)性的功能，早就支持在Windows 10平臺(tái)上安裝Progressive Web Apps（PWA）。谷歌表示安裝在桌面的網(wǎng)頁(yè)應(yīng)用使用體驗(yàn)非常接近于本地應(yīng)用，并且應(yīng)用的服務(wù)商可以緩存所有資源因此這些PWA應(yīng)用有很好的兼容性和可靠性。

在上一篇文章Service Worker學(xué)習(xí)與實(shí)踐（一）——離線緩存中，已經(jīng)講到Service Worker的生命周期、如何創(chuàng)建、激活、更新Web應(yīng)用程序的Service Worker，并且給出了一個(gè)簡(jiǎn)單的示例來(lái)說(shuō)明使用Service Worker來(lái)實(shí)現(xiàn)離線緩存的原理，在這篇文章里，主要是對(duì)Service Worker實(shí)現(xiàn)原生應(yīng)用程序的能力做出一定解析，下一篇文章，將通過(guò)一個(gè)例子闡述如何使用Service Worker實(shí)現(xiàn)消息推送功能。

Progressive Web App, 簡(jiǎn)稱 PWA，是提升Web App的體驗(yàn)的一種新方法，能給用戶原生應(yīng)用的體驗(yàn)。

PWA能做到原生應(yīng)用的體驗(yàn)不是靠特指某一項(xiàng)技術(shù)，而是經(jīng)過(guò)應(yīng)用一些新技術(shù)進(jìn)行改進(jìn)，在安全、性能和體驗(yàn)三個(gè)方面都有很大提升，PWA本質(zhì)上是Web App，借助一些新技術(shù)也具備了Native App的一些特性，兼具Web App和Native App的優(yōu)點(diǎn)。

PWA的主要特點(diǎn)包括下面三點(diǎn)：

可靠 - 即使在不穩(wěn)定的網(wǎng)絡(luò)環(huán)境下，也能瞬間加載并展現(xiàn)
體驗(yàn) - 快速響應(yīng)，并且有平滑的動(dòng)畫響應(yīng)用戶的操作
粘性 - 像設(shè)備上的原生應(yīng)用，具有沉浸式的用戶體驗(yàn)，用戶可以添加到桌面
PWA本身強(qiáng)調(diào)漸進(jìn)式，并不要求一次性達(dá)到安全、性能和體驗(yàn)上的所有要求，開發(fā)者可以通過(guò)PWA Checklist查看現(xiàn)有的特征。

通過(guò)上面的PWA Checklist，總結(jié)起來(lái)，PWA大致有以下的優(yōu)勢(shì)：

體驗(yàn)：通過(guò)Service Worker配合Cache Storage API，保證了PWA首屏的加載效率，甚至配合本地存儲(chǔ)可以支持離線應(yīng)用；

粘性：PWA是可以安裝的，用戶點(diǎn)擊安裝到桌面后，會(huì)在桌面創(chuàng)建一個(gè) PWA 應(yīng)用，并且不需要從應(yīng)用商店下載，可以借助Web App Manifest提供給用戶和Native App一樣的沉浸式體驗(yàn)，可以通過(guò)給用戶發(fā)送離線通知，讓用戶回流；

漸進(jìn)式：適用于大多數(shù)現(xiàn)代瀏覽器，隨著瀏覽器版本的迭代，其功能是漸進(jìn)增強(qiáng)的；

無(wú)版本問題：如Web應(yīng)用的優(yōu)勢(shì)，更新版本只需要更新應(yīng)用程序?qū)?yīng)的靜態(tài)文件即可，Service Worker會(huì)幫助我們進(jìn)行更新；

跨平臺(tái)：Windows、Mac OSX、Android、IOS，一套代碼，多處使用；

消息推送：即使用戶已經(jīng)關(guān)閉應(yīng)用程序，仍然可以對(duì)用戶進(jìn)行消息推送；

總的說(shuō)來(lái)，只要Web應(yīng)用支持的功能，對(duì)于PWA而言，基本都支持，此外，還提供了原生能力。

注意這里說(shuō)的manifest不是指的manifest緩存，這個(gè)manifest是一個(gè)JSON文件，開發(fā)者可以利用它控制在用戶想要看到應(yīng)用的區(qū)域（例如移動(dòng)設(shè)備主屏幕）中如何向用戶顯示網(wǎng)絡(luò)應(yīng)用或網(wǎng)站，指示用戶可以啟動(dòng)哪些功能，以及定義其在啟動(dòng)時(shí)的外觀。

manifest提供了將網(wǎng)站書簽保存到設(shè)備主屏幕的功能。當(dāng)網(wǎng)站以這種方式啟動(dòng)時(shí)：

它具有唯一的圖標(biāo)和名稱，以便用戶將其與其他網(wǎng)站區(qū)分開來(lái)。

它會(huì)在下載資源或從緩存恢復(fù)資源時(shí)向用戶顯示某些信息。

它會(huì)向?yàn)g覽器提供默認(rèn)顯示特性，以避免網(wǎng)站資源可用時(shí)的過(guò)渡過(guò)于生硬。

下面是我的博客網(wǎng)站的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"
  }]
}

上面的字段含義也不用多解釋了，大致就是啟動(dòng)的icon樣式，應(yīng)用名稱、簡(jiǎn)寫名稱與描述等，其中必須確保有short_name和name。此外，最好設(shè)定好start_url，表示啟動(dòng)的根頁(yè)面路徑，如果不添加，則是使用當(dāng)前路徑。

display為standalone，則會(huì)隱藏瀏覽器的UI界面，如果設(shè)置display為browser，則啟動(dòng)時(shí)保存瀏覽器的UI界面。

orientation表示啟動(dòng)時(shí)的方向，橫屏、豎屏等，具體參數(shù)值可參考文檔。

background_color和theme_color表示應(yīng)用程序的背景顏色和主題顏色。

在創(chuàng)建好manifest.json后，將、使用link標(biāo)簽添加到應(yīng)用程序的所有頁(yè)面上，

只有注冊(cè)、激活了Service Worker的網(wǎng)站才能夠安裝到桌面，在Chrome 70版本之前，需要手動(dòng)開啟實(shí)驗(yàn)性功能，步驟如下：

進(jìn)入chrome://flags

找到Desktop PWAs，選擇Enabled

此時(shí)，進(jìn)入一個(gè)支持PWA的網(wǎng)站（例如Google I/O），在Chrome瀏覽器右上角，點(diǎn)擊安裝。即可安裝到桌面。這里以我的博客為例：

可以到awesome-pwa查找目前支持PWA的網(wǎng)站列表

接著點(diǎn)擊安裝：

這樣，一個(gè)PWA應(yīng)用就安裝到你的機(jī)器上了，這里我的操作系統(tǒng)為Mac OSX，應(yīng)用程序可以通過(guò)Launchpad打開，在Windows也是同理的，會(huì)被安裝到桌面上，可通過(guò)開始菜單找到應(yīng)用程序。

打開應(yīng)用程序，發(fā)現(xiàn)其與原始應(yīng)用幾乎沒有任何差距：

Windows與上述方法類似，這里就不做過(guò)多闡述

由于當(dāng)初蘋果推出PWA時(shí)，并沒有一個(gè)統(tǒng)一的manifest的規(guī)范，最開始的設(shè)計(jì)是通過(guò)meta和link標(biāo)簽來(lái)設(shè)定應(yīng)用的對(duì)應(yīng)參數(shù)的，所以，在移動(dòng)端上的PWA應(yīng)用，為了兼容Windows Phone和iPhone，需要在所有頁(yè)面的HTML的head中添加以下的標(biāo)簽：

添加好后，就可以體驗(yàn)我們的PWA了！

IOS在11.3版本之后也支持PWA了，知道這一消息的我，卸載了手機(jī)上很多軟件，立刻體驗(yàn)上了PWA。

這里以豆瓣移動(dòng)端為例使用Safiri瀏覽器打開一個(gè)網(wǎng)站，點(diǎn)擊下方分享圖標(biāo)，選擇添加到主屏幕。

然后在新彈出的一個(gè)瀏覽器頁(yè)面，選擇添加：

就以上簡(jiǎn)短的步驟，移動(dòng)端上的一個(gè)PWA桌面應(yīng)用就添加好了，趕緊體驗(yàn)吧！

本文是筆者寫的Service Worker學(xué)習(xí)與實(shí)踐系列文章的第二篇，主要講述的是配合Service Worker使用的PWA的優(yōu)勢(shì)，如何配置manifest.json文件來(lái)實(shí)現(xiàn)將PWA安裝到桌面，并通過(guò)Mac OSX和IOS如何安裝PWA到桌面的詳細(xì)步驟，闡述了如何配置PWA，使其方便地安裝到桌面上。

下一篇文章中，主要講述Service Worker在PWA實(shí)踐中的重要能力：Web Push。