小試PWA

原文連接

PWA概念

PWA，全名 Progressive Web App，是提高Web App體驗的一種新方法，它經過對應用的一系列改進，對應用在安全、性能和體驗三個方面都有很大提高，使其兼具 Web App 和 Native App 的優勢。

以下特色，能夠解釋爲何要選擇PWA：

1. 不限瀏覽器、不限設備：能訪問Web應用的瀏覽器和設備都可使用；
2. 原生應用的體驗：Manifest的設置
3. 持續更新：得益於Service worker，應用能夠時刻保持最新；
4. 可離線訪問：這也是Service worker的功勞；
5. 安全：經過HTTPS訪問，保證了安全性；
6. 安裝方便：能夠隨時刪除、隨時安裝，無需下載，節省流量；
7. 部署便捷：這個優勢開發人員應該深有體會，沒有了繁瑣的打包、加密、簽名、審覈過程。

簡而言之，就是你的Web站點能夠添加到移動設備的主屏幕，像原生應用同樣安全的訪問，且Android、iOS都支持，這就是PWA。

基本條件

一個合格的PWA應用必須具有以下條件：

1. Web應用支持HTTPS
2. 擁有 Web App Manifest 文件
3. 成功註冊了 Service worker
4. 用戶對站點的粘度符合必定條件

實現過程

明白PWA是咋回事了，就要動手開發了。既然是PWA是基於Web App的，那麼Web App其實用可用任何前端框架實現。這裏選用的是Angular + Ionic，爲何選用Ionic，緣由是讓應用的UI更接近原生應用，加強用戶體驗。

建立Ionic應用

使用以下命令建立應用：

ionic start pwa-app sidemenu --type=angular
複製代碼

這個命令會建立一個帶有左側菜單的Ionic應用，執行 ionic serve，即可看到效果。

改進應用

從PWA的概念能夠看到，PWA應用須要Manifest文件、註冊Service woker，這些開發者均可以自行手動添加，可是Angular已經提供了PWA的組件，方便進行這些改進。

執行以下命令，安裝PWA組件：

ng add @angular/pwa
複製代碼

這個組件對應用進行了以下改進：

安裝了以下組件：

"@angular/pwa": "^0.12.4",
"@angular/service-worker": "^7.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
複製代碼

修改了以下文件：

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"
],
複製代碼

此時，一個PWA應用的基本框架就搭建好了。

PWA應用界面設置

在src目錄下能夠找到名爲manifest.json的文件，該文件的做用是容許開發者控制PWA添加到桌面，容許定製桌面圖標、URL等等。示例內容以下:

{
    "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"
        },
        ...
    ]
}
複製代碼

參數解釋以下：

1. name：主屏幕上應用啓動時，在splash界面顯示的名稱
2. short_name：在瀏覽器中添加至主屏幕時顯示的缺省名字
3. theme_color：主題顏色
4. background_color：背景顏色
5. display：PWA應用顯示的方式，可選值：fullscreen、standalone、browser，其中standalone是原生應用的觀感，一般選此值
6. icons：設置PWA應用的圖標
7. start_url：應用啓動連接

關於manifest文件的詳細說明，參見參考文檔。

注意：上述配置僅對Android手機有效，對於iOS，須要在index.html文件中設置。

設置以下：

<!-- 蘋果應用的名字-->
<meta name="apple-mobile-web-app-title" content="Wallet">

<!-- 容許使用獨立模式顯示Web內容-->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 自定義蘋果的圖標-->
<link rel="apple-touch-icon" href="assets/ios/icon/icon-76.png">

<!-- 針對不一樣屏幕大小，使用不一樣圖標 -->
<link rel="apple-touch-icon" sizes="120x120" href="assets/ios/icon/icon-76.png">
...

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

<!-- 針對不一樣屏幕大小，自定義蘋果啓動界面的圖片-->
<!-- 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" />
...

<!-- 設置狀態欄樣式，black-translucent、 black、default-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
複製代碼

Service worker配置

在src目錄下能夠找到名爲ngsw-config.json的文件，該文件中設置的緩存的策略，示例內容以下:

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

參數解釋以下：

1. index：緩存的路徑，一般爲/index.html
2. assetGroups：須要緩存的assets進行分組
3. name：每一個分組的名字
4. installMode、updateMode：初始緩存、更新緩存的模式，可選：prefetch(預先緩存)、lazy(請求時才緩存)
5. resources：緩存的資源文件

在Chrome的調試工具 -> application -> Cache Storage下，能夠看到緩存的內容。

使用http-server啓動應用

因爲Service worker配置的是生產環境下生效，開發測試時可使用http-server組件建立一個Web服務器，安裝命令以下：

npm install -g http-server
複製代碼

構建應用的產品包：

ionic build --prod

http-server ./www -p 8000
複製代碼

這樣經過 127.0.0.1:8000 或者 localIP:8000 就能訪問應用了。

測試PWA效果

使用瀏覽器

這裏使用的是Chrome瀏覽器測試效果。 網頁中輸入 127.0.0.1:8000，在Chrome的調試工具中打開Application -> Manifest，見下圖：

這裏能夠查看manifest.json文件內容，單擊 「Add to homescreen」，看見瀏覽器彈出：

若是沒有出現這個提示框，能夠在Console中看到錯誤緣由，多半是Service Worker沒有註冊成功。 在Service Workers中可查看Service worker的相關內容：

真機上測試

同時也可以使用移動設備上的瀏覽器訪問 localIP:8000，將此頁面添加至移動設備的桌面，來查看PWA的效果。 Xcode中的iOS模擬器亦可進行測試。 Android和iOS上對PWA的使用有一些不一樣點，例如iOS可修改PWA應用的名字，Android可設置屏幕方向等。同時還有一些限制，好比iOS對於Native API無法使用等。具體內容見參考文檔6。

使用Lighthouse評測Web應用

咱們還能夠採用更爲專業的方法來對應用進行測評。這裏推薦使用Lighthouse。它是一個開源的自動化Web應用評測工具，可參考其評測結果，對Web應用進行完善。 若是你使用Chrome瀏覽器，能夠安裝Lighthouse的組件，或者使用使用命令行方式進行改進。 在應用下執行：

npm install -g lighthouse

lighthouse your-url-path --view  
//參數view會直接在瀏覽器中打開測試報告，例如：lighthouse http://127.0.0.1:8000/ --view
複製代碼

這樣，就完成了一個PWA應用，能夠瀏覽器、Android、IOS通吃了。愜意啊!

Ionic PWA Toolkit

除了上述配置方法外，Ionic還提供了一個開箱即用的PWA小工具——Ionic PWA Toolkit，使用它能夠直接建立好一個PWA的應用。只是這個工具是基於Stencil的，待有時間了再研究下。

小結

上述方法不只僅受限於Ionic或者Angular。PWA應用說白了仍是一個Web應用，理論上講對於任何的Web應用，只要參考PWA的標準對其進行改造，就可支持PWA，只是在改造前須要對現有應用作下評估，是否觸碰了Android或iOS對PWA的限制。

參考文檔

1. Manifest文件說明
2. Ionic4中實現PWA
3. Lighthouse介紹
4. Service worker配置
5. iOS 12.2對PWA的改進
6. PWA 登錄 iOS