Service Worker学习与实践（二）——PWA简介

这周， Chrome 70 正式版本发布， Progressive Web Apps（PWA） 已经正式支持到 Windows 10 平台，然而，早在前几个版本之前， Chrome 就已经通过 chrome://flags 支持开启实验性的功能，早就支持在 Windows 10 平台上安装 Progressive Web Apps（PWA） 。谷歌表示安装在桌面的网页应用使用体验非常接近于本地应用，并且应用的服务商可以缓存所有资源因此这些PWA应用有很好的兼容性和可靠性。

在上一篇文章 Service Worker学习与实践（一）——离线缓存 中，已经讲到 Service Worker 的生命周期、如何创建、激活、更新 Web 应用程序的 Service Worker ，并且给出了一个简单的示例来说明使用 Service Worker 来实现离线缓存的原理，在这篇文章里，主要是对 Service Worker 实现原生应用程序的能力做出一定解析，下一篇文章，将通过一个例子阐述如何使用 Service Worker 实现消息推送功能。

Progressive Web Apps（PWA）

Progressive Web App , 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。

PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升， PWA 本质上是 Web App ，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。

PWA 的主要特点包括下面三点：

可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现 体验 - 快速响应，并且有平滑的动画响应用户的操作 粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面 PWA 本身强调渐进式，并不要求一次性达到安全、性能和体验上的所有要求，开发者可以通过PWA Checklist查看现有的特征。

通过上面的 PWA Checklist ，总结起来， PWA 大致有以下的优势：

• 体验：通过 Service Worker 配合 Cache Storage API ，保证了 PWA 首屏的加载效率，甚至配合本地存储可以支持离线应用；
• 粘性： PWA 是可以安装的，用户点击安装到桌面后，会在桌面创建一个 PWA 应用，并且不需要从应用商店下载，可以借助 Web App Manifest 提供给用户和 Native App 一样的沉浸式体验，可以通过给用户发送离线通知，让用户回流；
• 渐进式：适用于大多数现代浏览器，随着浏览器版本的迭代，其功能是渐进增强的；
• 无版本问题：如 Web 应用的优势，更新版本只需要更新应用程序对应的静态文件即可， Service Worker 会帮助我们进行更新；
• 跨平台： Windows 、 Mac OSX 、 Android 、 IOS ，一套代码，多处使用；
• 消息推送：即使用户已经关闭应用程序，仍然可以对用户进行消息推送；

总的说来，只要 Web 应用支持的功能，对于 PWA 而言，基本都支持，此外，还提供了原生能力。

使用 PWA manifest 添加桌面入口

注意这里说的 manifest 不是指的 manifest 缓存，这个 manifest 是一个 JSON 文件，开发者可以利用它控制在用户想要看到应用的区域（例如移动设备主屏幕）中如何向用户显示网络应用或网站，指示用户可以启动哪些功能，以及定义其在启动时的外观。

manifest 提供了将网站书签保存到设备主屏幕的功能。当网站以这种方式启动时：

• 它具有唯一的图标和名称，以便用户将其与其他网站区分开来。
• 它会在下载资源或从缓存恢复资源时向用户显示某些信息。
• 它会向浏览器提供默认显示特性，以避免网站资源可用时的过渡过于生硬。

下面是我的博客网站的 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"
  }]
}
复制代码

上面的字段含义也不用多解释了，大致就是启动的 icon 样式，应用名称、简写名称与描述等，其中必须确保有 short_name 和 name 。此外，最好设定好 start_url ，表示启动的根页面路径，如果不添加，则是使用当前路径。

display 为 standalone ，则会隐藏浏览器的 UI 界面，如果设置 display 为 browser ，则启动时保存浏览器的 UI 界面。

orientation 表示启动时的方向，横屏、竖屏等，具体参数值可参考文档。

background_color 和 theme_color 表示应用程序的背景颜色和主题颜色。

在创建好 manifest.json 后，将、使用 link 标签添加到应用程序的所有页面上， <link rel="manifest" href="/manifest.json">

安装到桌面

桌面端（以 Mac OSX 为例）

只有注册、激活了 Service Worker 的网站才能够安装到桌面，在 Chrome 70 版本之前，需要手动开启实验性功能，步骤如下：

1. 进入 chrome://flags
2. 找到 Desktop PWAs ，选择 Enabled

此时，进入一个支持 PWA 的网站（例如Google I/O），在 Chrome 浏览器右上角，点击安装。即可安装到桌面。这里以我的博客为例：

可以到 awesome-pwa 查找目前支持 PWA 的网站列表

接着点击安装：

这样，一个 PWA 应用就安装到你的机器上了，这里我的操作系统为 Mac OSX ，应用程序可以通过 Launchpad 打开，在 Windows 也是同理的，会被安装到桌面上，可通过开始菜单找到应用程序。

打开应用程序，发现其与原始应用几乎没有任何差距：

Windows与上述方法类似，这里就不做过多阐述

移动端（以 IOS 为例）

由于当初苹果推出 PWA 时，并没有一个统一的 manifest 的规范，最开始的设计是通过 meta 和 link 标签来设定应用的对应参数的，所以，在移动端上的 PWA 应用，为了兼容 Windows Phone 和 iPhone ，需要在所有页面的 HTML 的 head 中添加以下的标签：

<meta name="msapplication-TileImage" content="./images/logo/logo152.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Counterxing">
<link rel="apple-touch-icon" href="./images/logo/logo152.png">
复制代码

添加好后，就可以体验我们的 PWA 了！

IOS 在 11.3 版本之后也支持 PWA 了，知道这一消息的我，卸载了手机上很多软件，立刻体验上了 PWA 。

这里以豆瓣移动端为例使用 Safiri 浏览器打开一个网站，点击下方分享图标，选择添加到主屏幕。

然后在新弹出的一个浏览器页面，选择添加：

就以上简短的步骤，移动端上的一个 PWA 桌面应用就添加好了，赶紧体验吧！

小结

本文是笔者写的 Service Worker 学习与实践系列文章的第二篇，主要讲述的是配合 Service Worker 使用的 PWA 的优势，如何配置 manifest.json 文件来实现将 PWA 安装到桌面，并通过 Mac OSX 和 IOS 如何安装 PWA 到桌面的详细步骤，阐述了如何配置 PWA ，使其方便地安装到桌面上。

下一篇文章中，主要讲述 Service Worker 在 PWA 实践中的重要能力： Web Push 。