小试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