PWA概念
PWA，全名 Progressive Web App，是提升Web App體驗(yàn)的一種新方法，它通過對(duì)應(yīng)用的一系列改進(jìn)，對(duì)應(yīng)用在安全、性能和體驗(yàn)三個(gè)方面都有很大提升，使其兼具 Web App 和 Native App 的優(yōu)點(diǎn)。
如下特點(diǎn)，可以解釋為什么要選擇PWA：
- 不限瀏覽器、不限設(shè)備：能訪問Web應(yīng)用的瀏覽器和設(shè)備均可使用；
- 原生應(yīng)用的體驗(yàn)：Manifest的設(shè)置
- 持續(xù)更新：得益于Service worker，應(yīng)用可以時(shí)刻保持最新；
- 可離線訪問：這也是Service worker的功勞；
- 安全：通過HTTPS訪問，保證了安全性；
- 安裝方便：可以隨時(shí)刪除、隨時(shí)安裝，無(wú)需下載，節(jié)省流量；
- 部署便捷：這個(gè)優(yōu)點(diǎn)開發(fā)人員應(yīng)該深有體會(huì)，沒有了繁瑣的打包、加密、簽名、審核過程。
簡(jiǎn)而言之，就是你的Web站點(diǎn)可以添加到移動(dòng)設(shè)備的主屏幕，像原生應(yīng)用一樣安全的訪問，且Android、iOS都支持，這就是PWA。
基本條件
一個(gè)合格的PWA應(yīng)用必須具備如下條件：
- Web應(yīng)用支持HTTPS
- 擁有 Web App Manifest 文件
- 成功注冊(cè)了 Service worker
- 用戶對(duì)站點(diǎn)的粘度符合一定條件
實(shí)現(xiàn)過程
明白PWA是咋回事了，就要?jiǎng)邮珠_發(fā)了。既然是PWA是基于Web App的，那么Web App其實(shí)用可用任何前端框架實(shí)現(xiàn)。這里選用的是Angular + Ionic，為什么選用Ionic，原因是讓應(yīng)用的UI更接近原生應(yīng)用，增強(qiáng)用戶體驗(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，這些開發(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)：
- 安裝了如下組件：
"@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"
],
此時(shí)，一個(gè)PWA應(yīng)用的基本框架就搭建好了。
PWA應(yīng)用界面設(shè)置
在src目錄下可以找到名為manifest.json的文件，該文件的作用是允許開發(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ù)解釋如下：
- name：主屏幕上應(yīng)用啟動(dòng)時(shí)，在splash界面顯示的名稱
- short_name：在瀏覽器中添加至主屏幕時(shí)顯示的缺省名字
- theme_color：主題顏色
- background_color：背景顏色
- display：PWA應(yīng)用顯示的方式，可選值：fullscreen、standalone、browser，其中standalone是原生應(yīng)用的觀感，通常選此值
- icons：設(shè)置PWA應(yīng)用的圖標(biāo)
- start_url：應(yīng)用啟動(dòng)鏈接
關(guān)于manifest文件的詳細(xì)說(shuō)明，參見參考文檔。
注意：上述配置僅對(duì)Android手機(jī)有效，對(duì)于iOS，需要在index.html文件中設(shè)置。
設(shè)置如下：
<!-- 蘋果應(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">
<!-- 自定義蘋果的圖標(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">
...
<!-- 自定義蘋果啟動(dòng)界面的圖片-->
<link rel="apple-touch-startup-image" href="assets/ios/splash/Default@2x~universal~anyany 2732 2732.png">
<!-- 針對(duì)不同屏幕大小，自定義蘋果啟動(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ù)解釋如下：
- index：緩存的路徑，通常為/index.html
- assetGroups：需要緩存的assets進(jìn)行分組
- name：每個(gè)分組的名字
- installMode、updateMode：初始緩存、更新緩存的模式，可選：prefetch(預(yù)先緩存)、lazy(請(qǐng)求時(shí)才緩存)
- resources：緩存的資源文件
在Chrome的調(diào)試工具 -> application -> Cache Storage下，可以看到緩存的內(nèi)容。
使用http-server啟動(dòng)應(yīng)用
由于Service worker配置的是生產(chǎn)環(huán)境下生效，開發(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
這樣通過 127.0.0.1:8000 或者 localIP:8000 就能訪問應(yīng)用了。
測(cè)試PWA效果
使用瀏覽器
這里使用的是Chrome瀏覽器測(cè)試效果。
網(wǎng)頁(yè)中輸入 127.0.0.1:8000，在Chrome的調(diào)試工具中打開Application -> Manifest，見下圖：
這里可以查看manifest.json文件內(nèi)容，單擊 “Add to homescreen”，看見瀏覽器彈出：
如果沒有出現(xiàn)這個(gè)提示框，可以在Console中看到錯(cuò)誤原因，多半是Service Worker沒有注冊(cè)成功。
在Service Workers中可查看Service worker的相關(guān)內(nèi)容：
真機(jī)上測(cè)試
同時(shí)也可使用移動(dòng)設(shè)備上的瀏覽器訪問 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沒法使用等。具體內(nèi)容見參考文檔6。
使用Lighthouse評(píng)測(cè)Web應(yīng)用
我們還可以采用更為專業(yè)的方法來(lái)對(duì)應(yīng)用進(jìn)行測(cè)評(píng)。這里推薦使用Lighthouse。它是一個(gè)開源的自動(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ì)直接在瀏覽器中打開測(cè)試報(bào)告，例如：lighthouse http://127.0.0.1:8000/ --view
這樣，就完成了一個(gè)PWA應(yīng)用，可以瀏覽器、Android、IOS通吃了。愜意啊!
Ionic PWA Toolkit
除了上述配置方法外，Ionic還提供了一個(gè)開箱即用的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的限制。
