PWA——下一代的web应用模型

概述

不知道从什么时候开始，当我们在浏览网页时，页面会出现一个弹窗，询问我们是否要将此网页保存到本地，如果我们选择了确定，在设备的主屏上就会出现一个新的app，而它就是我们刚才浏览的网页。这种app我们并没有从应用商店去下载，但是我们可以像使用app一样去使用它，也可以像卸载其他app一样去将它卸载，那么这究竟是个什么东西呢，它就是这篇文章的主角——PWA。

什么是PWA

PWA是Progressive Web App的简写，中文名称为渐进式web应用。它是Google 在2016年提出的概念，2017年落地的web技术，一种在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。PWA不单指一种技术，你也可以将其理解为一种思想和概念，目的就是对标原生app，将Web网站通过一系列的Web技术去优化它，提升其安全性，性能，流畅性，用户体验等各方面指标，最后达到用户就像在用app一样的感觉。

PWA为什么会出现

说到app，我们就不得不提起native app即原生app，现在非常主流的移动端应用。原生app使用起来会很流畅，性能好，安全性也可以很高，这是它很显著的优势。但是缺点呢，也很明显，比如：

1. 开发成本很昂贵
2. 软件上线，版本更新都需要发布到不同的商店，并通过审核

这对开发人员来说是比较麻烦的事情。
而对于用户来说，有些APP可能使用频率特别少，但还是不得不去商店中下载庞大的安装包，或者可能一段时间不使用以后，随着版本的更新，也不得不去重新更新并安装。

PWA则完美地避免了这些问题。

如何判断一个web应用是PWA

要判断一个web应用是否是PWA，可以从以下几个方面去考虑：

1. 可发现的—— 内容可以通过搜索引擎发现。
2. 可安装—— 可以出现在设备的主屏幕。
3. 可链接—— 你可以简单地通过一个URL来分享它。 
4. 独立于网络——它可以在离线状态或者是在网速很差的情况下运行。
5. 渐进式—— 它在老版本的浏览器仍旧可以使用，在新版本的浏览器上可以使用全部功能。
6. 可重用—— 无论何时有新的内容它都可以发送通知。
7. 响应性—— 它在任何具有屏幕和浏览器的设备上可以正常使用——包括手机，平板电脑，笔记本，电视，冰箱，等。
8. 安全—— 在你和应用之间的连接是安全的，可以阻止第三方访问你的敏感数据。

当然，在安装方式上PWA应用与原生app有很大的不同，但是在实际使用上，与原生应用的差距非常小，对于用户来说，几乎是无感的。

核心功能

Service-Workers

Service Workers是浏览器和网络之间的虚拟代理，运行在一个与页面的 JavaScript 主线程独立的线程上，并且没有对 DOM 结构的任何访问权限，并且可以在不同的上下文之间发送和接收信息。 您可分配给 Service Worker 一些任务，并使用基于 Promise 的方法在任务完成时收到结果。他们不仅仅提供离线功能，还提供包括处理通知，在单独的线程上执行繁重的计算等。Service workers 非常强大，因为他们可以控制网络请求，修改网络请求，返回缓存的自定义响应，或合成响应。因为它们非常强大，所以 Service Workers 只能在安全的上下文中执行（即 HTTPS ）。

注册service worker

if ('serviceWorker' in navigator) {
    // 浏览器支持SW
      // Service Worker 的注册路径决定了其 scope 默认作用页面的范围。如果存放在网站的根路径下，则将会收到该网站的所有 fetch 事件。如果希望改变它的作用域，可在第二个参数设置 scope 范围
      navigator.serviceWorker.register('serviceWorker.js').then(function (registration) {
   
        console.log('ServiceWorker注册成功: ', registration.scope);
      }).catch(function (err) {
   
        console.log('ServiceWorker注册失败: ', err);
      });
    }

注册完成后，serviceWorker.js 文件会自动下载，然后安装，最后激活。

service worker中的常用事件

1. install