PWA

PWA详解及实践探索

PWA 不是一项具体的技术，他是应用了一系列技术进行使用体验优化后的Web APP，具备与Native App 一致的用户体验，可以添加主屏图标、离线可用、接收离线通知等。

什么是PWA

PWA 全称Progressive Web Apps(渐进式Web应用程序)，旨在使用现有的web技术提供用户更优的使用体验。 PWA 具备三个主要的特性

• 可靠  一方面是指 PWA 的安全性，PWA 只能运行在 HTTPS 上；另外一方面是指在网络不稳定或者没网状况下，PWA 依然能够访问。
• 快速  快速响应用户的交互行为，而且具备平滑流畅的动画、加载速度、渲染速度和渲染性能等。
• 用户粘性  经过添加到桌面以及离线消息推送，能带来用户的第二次访问，而且依靠良好的用户体验吸引用户再次访问。 PWA背后不是一种新的技术，而是集合当前多种web技术的一种集合。分别利用各自的功能来完成渐进式的总体需求

下面是几个demo

http://boscdn.bpc.baidu.com/assets/Screenrecorder-2018-03-20-21-54-22-56-2a6d5ac3.mp4 http://boscdn.bpc.baidu.com/assets/Screenrecorder-2018-03-21-17-27-31-297-a4d9412e.mp4 https://pwa.rocks

Web App Manifest

Web App Manifest 是支持站点在主屏上建立图标的技术方案，而且定制 PWA 的启动画面的图标和颜色等，以下图：

就是一个外链的 json 文件，经过 link 来引入：<link rel=“manifest” href=“/assets/manifest.json”>，文件的具体内容如图，Web App Manifest 的标准里还有不少其余的字段能够去 W3C 的标准里查找 当 Web 添加到桌面后，会出现的 icon 和 name。name 就是用来定义桌面上显示的名字，不过，若是你的名字取的太长，大于 icon 的宽度，可能会形成显示上的问题。因此，这里还有另一个 short_name 用来当宽度不够时，显示的精简版字体。

icons: {Array.<ImageObject>} 应用图标列表

其中 ImageObject 的属性值包括：

• src: {string} 图标 url
• type {string=} 图标的 mime 类型，非必填项，该字段可以让浏览器快速忽略掉不支持的图标类型
• sizes {string} 图标尺寸，格式为widthxheight，宽高数值以 css 的 px 为单位。若是须要填写多个尺寸，则使用空格进行间隔，如"48x48 96x96 128x128“

Display

定义 web 在打开时使用哪一种预览模式。这里主要有 4 种：

• fullscreen：全屏。全部可用的区域均可以被排列，目前该特性还未被彻底支持。
• standalone：当作一个独立应用。该模式是忽略掉浏览器自己的一些导航栏。不过，它能够进行下拉刷新。
• minimal-ui：该模式的外观和 standalone 差很少，不过它会提供用来控制 navigator 的最小 UI。不支持
• browser：使用默认浏览器模式。

就是一个外链的 json 文件，经过 link 来引入：<link rel=“manifest” href=“/assets/manifest.json”>，文件的具体内容如图，Web App Manifest 的标准里还有不少其余的字段能够去 W3C 的标准里查找

当 Web 添加到桌面后，会出现的 icon 和 name。name 就是用来定义桌面上显示的名字，不过，若是你的名字取的太长，大于 icon 的宽度，可能会形成显示上的问题。因此，这里还有另一个 short_name 用来当宽度不够时，显示的精简版字体。

Service Worker

Web Worker这个 API 的惟一目的就是解放主线程，Web Worker 是脱离在主线程以外的，将一些复杂的耗时的活交给它干，完成后经过 postMessage 方法告诉主线程，而主线程经过 onMessage 方法获得 Web Worker 的结果反馈。

• Service Worker 在 Web Worker 的基础上加上了持久离线缓存能力
• 一旦被 install，就永远存在，除非被手动 unregister
• 用到的时候能够直接唤醒，不用的时候自动睡眠
• 可编程拦截代理请求和返回，缓存文件，缓存的文件能够被网页进程取到（包括网络离线状态）
• 离线内容开发者可控
• 能向客户端推送消息

基于浏览器中的 javaScript 单线程的现实逐渐不能知足现代web需求的现状,例如耗时的计算，用户的交互显然会受影响。- 为了将这些耗时操做从主线程中解放出来，早期W3C新增了一个Web Worker 的 API，能够脱离主线程单独执行，而且能够与主线程交互。

• 不过Web Worker是临时性的依赖于建立页面 ，不能知足咱们持久化的需求。
• 冲着这个目标，下面就比较容易解决了，搞个能持久存在的就好了。
• 在Web Worker的基础上，W3C新增了service worker来知足咱们持久化的需求。
• 其生命周期与页面无关，关联页面未关闭时，它也能够退出，没有关联页面时，它也能够启动功能

Service Worker 的缓存机制是依赖 Cache API 实现的

Chrome搞了个Service Worker出来，给了Web一个能够跑在后台的线程，它能够搭配很是靠谱的Cache API作缓存、能够拦截全部HTTP请求并使用Fetch API进行response，一个很是完备的Proxy就这么诞生了。

Service Worker 的工做原理是基于注册、安装、激活等步骤在浏览器 js 主线程中独立分担缓存任务的

要安装 Service Worker， 咱们须要经过在 js 主线程（常规的页面里的 js ）注册 Service Worker 来启动安装，这个过程将会通知浏览器咱们的 Service Worker 线程的 javaScript 文件在什么地方呆着。

这段代码首先是要判断 Service Worker API 的可用状况，支持的话我们才继续谈实现，不然免谈了。

若是支持的话，在页面 onload 的时候注册位于 /sw.js 的 Service Worker 每次页面加载成功后，就会调用 register() 方法，浏览器将会判断 Service Worker 线程是否已注册并作出相应的处理。

register 方法的 scope 参数是可选的，用于指定你想让 Service Worker 控制的内容的子目录。本 demo 中服务工做线程文件位于根网域， 这意味着服务工做线程的做用域将是整个来源。

Service Worker 线程将接收 scope 指定网域目录上全部事项的 fetch 事件，若是咱们的 Service Worker 的 javaScript 文件在 /a/b/sw.js， 不传 scope 值的状况下, scope 的值就是 /a/b

install 事件咱们会绑定在 Service Worker 文件中，在 Service Worker 安装成功后，install 事件被触发。

install 事件通常是被用来填充你的浏览器的离线缓存能力。为了达成这个目的，咱们使用了 Service Worker 新的标志性的存储 cache API — 一个 Service Worker 上的全局对象，它使咱们能够存储网络响应发来的资源，而且根据它们的请求来生成key。这个 API 和浏览器的标准的缓存工做原理很类似，可是是只对应你的站点的域的。它会一直持久存在，直到你告诉它再也不存储，你拥有所有的控制权。localStorage 的用法和 Service Worker cache 的用法很类似，可是因为 localStorage 是同步的用法

ExtendableEvent.waitUntil() 方法——这会确保 Service Worker 不会在 waitUntil() 里面的代码执行完毕以前安装完成 使用了 caches.open() 方法来建立了一个叫作 v1 的新的缓存，将会是咱们的站点资源缓存的第一个版本。它返回了一个建立缓存的 promise，当它 resolved 的时候，咱们接着会调用在建立的缓存实例（Cache API）上的一个方法 addAll()，这个方法的参数是一个由一组相对于 origin 的 URL 组成的数组，这些 URL 就是你想缓存的资源的列表。

在 activate 事件发生时，经过执行 self.clients.claim() 方法，更新全部客户端上的 Service

Service Worker 的特殊之处除了由浏览器触发更新以外，还应用了特殊的缓存策略： 若是该文件已 24 小时没有更新，当 Update 触发时会强制更新。这意味着最坏状况下 Service Worker 会天天更新一次。

每次任何被 Service Worker 控制的资源被请求到时，都会触发 fetch 事件，这些资源包括了指定的 scope 内的 html 文档，和这些 html 文档内引用的其余任何资源（好比 index.html 发起了一个跨域的请求来嵌入一个图片，这个也会经过 Service Worker）

废弃状态 ( redundant )：这个状态表示一个 Service Worker 的生命周期结束 进入废弃 (redundant) 状态的缘由可能为这几种： 安装 (install) 失败 激活 (activating) 失败 新版本的 Service Worker 替换了它并成为激活状态

Push Notification（ 消息通知 ）

• Push 和 Notification 是两个不一样的功能，涉及到两个 API 。
• Notification 是浏览器发出的通知消息。须要用户的赞成：Notification.requestPermission();
• Push 和 Notification 的关系，Push：服务器端将更新的信息传递给 SW ，Notification： SW 将更新的信息推送给用户。

Notification 也不是一开始就具有的，这也须要用户的赞成才行：模拟像 APP 推送，可以打开 APP 这种行为，在 SW 中监听 notificationclick 便可

Web Push

首先要生成 pair keys，接着经过客户端订阅，而后才能发送其中的 key 是咱们以前用 web-push 生成的。咱们经过 subscribe() 会自动获得本次订阅独一无二的描述，固然，咱们以前须要检查一下订阅状态，若是已经订阅了，就不必重复订阅了

后台也须要存储该次订阅的信息。后台的话，发送 push 给前台。以后，咱们在 sw.js 中的 push 事件中作相关处理便可，不过，你能不能成功仍是要看运气的。由于，咱们一直活在墙中，若是你使用 Chrome 的话。它的 message server 你是连不上的。 因此，关于 push 还须要等国内的浏览器跟上才行。

PWA 的兼容性

PWA 在 2017 年初，仅仅 Chrome 和 Firefox 支持 PWA，通过一年的发展，国内主流浏览器都已经支持 PWA，iOS 在 新发布的11.3 版本中也支持了 PWA。

基于 Vue.js 的 PWA 解决方案

Lavas：https://github.com/lavas-project/lavas

开发桌面端应用

Nw.js: https://nwjs.io/ Electron: https://electron.org.cn/doc/index.html