PWA概念

PWA，全名 Progressive Web App，是提升Web App體驗(yàn)的一種新方法，它通過(guò)對(duì)應(yīng)用的一系列改進(jìn)，對(duì)應(yīng)用在安全、性能和體驗(yàn)三個(gè)方面都有很大提升，使其兼具 Web App 和 Native App 的優(yōu)點(diǎn)。

如下特點(diǎn)，可以解釋為什么要選擇PWA：

1. 不限瀏覽器、不限設(shè)備：能訪問(wèn)Web應(yīng)用的瀏覽器和設(shè)備均可使用；
2. 原生應(yīng)用的體驗(yàn)：Manifest的設(shè)置
3. 持續(xù)更新：得益于Service worker，應(yīng)用可以時(shí)刻保持最新；
4. 可離線訪問(wèn)：這也是Service worker的功勞；
5. 安全：通過(guò)HTTPS訪問(wèn)，保證了安全性；
6. 安裝方便：可以隨時(shí)刪除、隨時(shí)安裝，無(wú)需下載，節(jié)省流量；
7. 部署便捷：這個(gè)優(yōu)點(diǎn)開(kāi)發(fā)人員應(yīng)該深有體會(huì)，沒(méi)有了繁瑣的打包、加密、簽名、審核過(guò)程。

簡(jiǎn)而言之，就是你的Web站點(diǎn)可以添加到移動(dòng)設(shè)備的主屏幕，像原生應(yīng)用一樣安全的訪問(wèn)，且Android、iOS都支持，這就是PWA。

基本條件

一個(gè)合格的PWA應(yīng)用必須具備如下條件：

1. Web應(yīng)用支持HTTPS
2. 擁有 Web App Manifest 文件
3. 成功注冊(cè)了 Service worker
4. 用戶(hù)對(duì)站點(diǎn)的粘度符合一定條件

實(shí)現(xiàn)過(guò)程

明白PWA是咋回事了，就要?jiǎng)邮珠_(kāi)發(fā)了。既然是PWA是基于Web App的，那么Web App其實(shí)用可用任何前端框架實(shí)現(xiàn)。這里選用的是Angular + Ionic，為什么選用Ionic，原因是讓?xiě)?yīng)用的UI更接近原生應(yīng)用，增強(qiáng)用戶(hù)體驗(yàn)。

創(chuàng)建Ionic應(yīng)用

使用如下命令創(chuàng)建應(yīng)用：

ionic start pwa-app sidemenu --type=angular

這個(gè)命令會(huì)創(chuàng)建一個(gè)帶有左側(cè)菜單的Ionic應(yīng)用，執(zhí)行 ionic serve，便可看到效果。

改進(jìn)應(yīng)用

從PWA的概念可以看到，PWA應(yīng)用需要Manifest文件、注冊(cè)Service woker，這些開(kāi)發(fā)者都可以自行手動(dòng)添加，但是Angular已經(jīng)提供了PWA的組件，方便進(jìn)行這些改進(jìn)。

執(zhí)行如下命令，安裝PWA組件：

ng add @angular/pwa

這個(gè)組件對(duì)應(yīng)用進(jìn)行了如下改進(jìn)：

1. 安裝了如下組件：

"@angular/pwa": "^0.12.4",
"@angular/service-worker": "^7.2.2",

2. 新增了如下文件：

src/ngsw-config.json
src/manifest.json
src/assets/icons/icon-128x128.png
src/assets/icons/icon-144x144.png
src/assets/icons/icon-152x152.png
src/assets/icons/icon-192x192.png
src/assets/icons/icon-384x384.png
src/assets/icons/icon-512x512.png
src/assets/icons/icon-72x72.png
src/assets/icons/icon-96x96.png

3. 修改了如下文件：

//app.module.ts：
import { ServiceWorkerModule } from "@angular/service-worker";
imports： [
    ...
    ServiceWorkerModule.register('ngsw-worker.js', { enabled： environment.production })
]

//index.html：
...
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#1976d2">
...

//angular.json文件：
"assets": [
    ...
    "src/manifest.json"
],

此時(shí)，一個(gè)PWA應(yīng)用的基本框架就搭建好了。

PWA應(yīng)用界面設(shè)置

在src目錄下可以找到名為manifest.json的文件，該文件的作用是允許開(kāi)發(fā)者控制PWA添加到桌面，允許定制桌面圖標(biāo)、URL等等。示例內(nèi)容如下:

{
    "name": "app",
    "short_name": "app22",
    "theme_color": "#1976d2",
    "background_color": "#fafafa",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [
        {
        "src": "assets/icons/icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
        },
        ...
    ]
}

參數(shù)解釋如下：

1. name：主屏幕上應(yīng)用啟動(dòng)時(shí)，在splash界面顯示的名稱(chēng)
2. short_name：在瀏覽器中添加至主屏幕時(shí)顯示的缺省名字
3. theme_color：主題顏色
4. background_color：背景顏色
5. display：PWA應(yīng)用顯示的方式，可選值：fullscreen、standalone、browser，其中standalone是原生應(yīng)用的觀感，通常選此值
6. icons：設(shè)置PWA應(yīng)用的圖標(biāo)
7. start_url：應(yīng)用啟動(dòng)鏈接

關(guān)于manifest文件的詳細(xì)說(shuō)明，參見(jiàn)參考文檔。

注意：上述配置僅對(duì)Android手機(jī)有效，對(duì)于iOS，需要在index.html文件中設(shè)置。

設(shè)置如下：

<!-- 蘋(píng)果應(yīng)用的名字-->
<meta name="apple-mobile-web-app-title" content="Wallet">

<!-- 允許使用獨(dú)立模式顯示W(wǎng)eb內(nèi)容-->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 自定義蘋(píng)果的圖標(biāo)-->
<link rel="apple-touch-icon" href="assets/ios/icon/icon-76.png">

<!-- 針對(duì)不同屏幕大小，使用不同圖標(biāo) -->
<link rel="apple-touch-icon" sizes="120x120" href="assets/ios/icon/icon-76.png">
...

<!-- 自定義蘋(píng)果啟動(dòng)界面的圖片-->
<link rel="apple-touch-startup-image" href="assets/ios/splash/Default@2x~universal~anyany 2732 2732.png">

<!-- 針對(duì)不同屏幕大小，自定義蘋(píng)果啟動(dòng)界面的圖片-->
<!-- iPhone Xs Max (1242px x 2688px) -->
<link href="/assets/ios/splash/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
...

<!-- 設(shè)置狀態(tài)欄樣式，black-translucent、 black、default-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Service worker配置

在src目錄下可以找到名為ngsw-config.json的文件，該文件中設(shè)置的緩存的策略，示例內(nèi)容如下:

{
    "index": "/index.html",
    "assetGroups": [
        {
            "name": "app",
            "installMode": "prefetch",
            "resources": {
                "files": [
                "/favicon.ico",
                "/index.html",
                "/*.css",
                "/*.js"
                ]
            }
        },
        ...
    ]
}

參數(shù)解釋如下：

1. index：緩存的路徑，通常為/index.html
2. assetGroups：需要緩存的assets進(jìn)行分組
3. name：每個(gè)分組的名字
4. installMode、updateMode：初始緩存、更新緩存的模式，可選：prefetch(預(yù)先緩存)、lazy(請(qǐng)求時(shí)才緩存)
5. resources：緩存的資源文件

在Chrome的調(diào)試工具 -> application -> Cache Storage下，可以看到緩存的內(nèi)容。

使用http-server啟動(dòng)應(yīng)用

由于Service worker配置的是生產(chǎn)環(huán)境下生效，開(kāi)發(fā)測(cè)試時(shí)可以使用http-server組件創(chuàng)建一個(gè)Web服務(wù)器，安裝命令如下：

npm install -g http-server

構(gòu)建應(yīng)用的產(chǎn)品包：

ionic build --prod

http-server ./www -p 8000

這樣通過(guò) 127.0.0.1:8000 或者 localIP:8000 就能訪問(wèn)應(yīng)用了。

測(cè)試PWA效果

使用瀏覽器

這里使用的是Chrome瀏覽器測(cè)試效果。
網(wǎng)頁(yè)中輸入 127.0.0.1:8000，在Chrome的調(diào)試工具中打開(kāi)Application -> Manifest，見(jiàn)下圖：

manifest.png

這里可以查看manifest.json文件內(nèi)容，單擊 “Add to homescreen”，看見(jiàn)瀏覽器彈出：

addToHome.png

如果沒(méi)有出現(xiàn)這個(gè)提示框，可以在Console中看到錯(cuò)誤原因，多半是Service Worker沒(méi)有注冊(cè)成功。
在Service Workers中可查看Service worker的相關(guān)內(nèi)容：

service worker.png

真機(jī)上測(cè)試

同時(shí)也可使用移動(dòng)設(shè)備上的瀏覽器訪問(wèn) localIP:8000，將此頁(yè)面添加至移動(dòng)設(shè)備的桌面，來(lái)查看PWA的效果。
Xcode中的iOS模擬器亦可進(jìn)行測(cè)試。
Android和iOS上對(duì)PWA的使用有一些不同點(diǎn)，例如iOS可修改PWA應(yīng)用的名字，Android可設(shè)置屏幕方向等。同時(shí)還有一些限制，比如iOS對(duì)于Native API沒(méi)法使用等。具體內(nèi)容見(jiàn)參考文檔6。

使用Lighthouse評(píng)測(cè)Web應(yīng)用

我們還可以采用更為專(zhuān)業(yè)的方法來(lái)對(duì)應(yīng)用進(jìn)行測(cè)評(píng)。這里推薦使用Lighthouse。它是一個(gè)開(kāi)源的自動(dòng)化Web應(yīng)用評(píng)測(cè)工具，可參考其評(píng)測(cè)結(jié)果，對(duì)Web應(yīng)用進(jìn)行完善。
如果你使用Chrome瀏覽器，可以安裝Lighthouse的組件，或者使用使用命令行方式進(jìn)行改進(jìn)。
在應(yīng)用下執(zhí)行：

npm install -g lighthouse

lighthouse your-url-path --view  
//參數(shù)view會(huì)直接在瀏覽器中打開(kāi)測(cè)試報(bào)告，例如：lighthouse http://127.0.0.1:8000/ --view

這樣，就完成了一個(gè)PWA應(yīng)用，可以瀏覽器、Android、IOS通吃了。愜意啊!

Ionic PWA Toolkit

除了上述配置方法外，Ionic還提供了一個(gè)開(kāi)箱即用的PWA小工具——Ionic PWA Toolkit，使用它可以直接創(chuàng)建好一個(gè)PWA的應(yīng)用。只是這個(gè)工具是基于Stencil的，待有時(shí)間了再研究下。

小結(jié)

上述方法不僅僅受限于Ionic或者Angular。PWA應(yīng)用說(shuō)白了還是一個(gè)Web應(yīng)用，理論上講對(duì)于任何的Web應(yīng)用，只要參考PWA的標(biāo)準(zhǔn)對(duì)其進(jìn)行改造，就可支持PWA，只是在改造前需要對(duì)現(xiàn)有應(yīng)用做下評(píng)估，是否觸碰了Android或iOS對(duì)PWA的限制。

參考文檔

1. Manifest文件說(shuō)明
2. Ionic4中實(shí)現(xiàn)PWA
3. Lighthouse介紹
4. Service worker配置
5. iOS 12.2對(duì)PWA的改進(jìn)
6. PWA 登陸 iOS