什么是Service Worker

Service Worker是一项比较新的Web技术，是Chromium团队在吸收了ChromePackaged App的Event Page机制，同时吸取了HTML5 AppCache标准失败的教训之后，提出一套新的W3C规范，旨在提高WebApp的离线缓存能力，缩小WebApp与NativeApp之间差距。

启用Service Worker

• 1、切入到https；由于Service Worker可以劫持连接，伪造和过滤响应，所以保证其在传输过程中不被篡改非常重要。
• 2、在页面加载的恰当时机注册Service Worker；示例中在index页面的body onload事件中注册了同path下的serviceworker.js作为index页面的服务线程。
• 3、编写serviceworker脚本逻辑；serviceworker是事件驱动型服务线程，所以serviceworker脚本逻辑中基本都是以事件监听作为逻辑入口，示例中在serviceworker脚本被安装的install事件中缓存index页面主资源及子资源，在fetch事件中，拦截前端页面发起的资源请求并到之前缓存的cache中匹配。

需要注意点

• 1、Service Worker线程运行的是js，有着独立的js环境，不能直接操作DOM树，但可以通过postMessage与其服务的前端页面通信。

  2、Service Worker服务的不是单个页面，它服务的是当前网络path下所有的页面，只要当前path 的Service Worker被安装，用户访问当前path下的任意页面均会启动该Service Worker。当一段时间没有事件过来，浏览器会自动停止Service Worker来节约资源，所以Service Worker线程中不能保存需要持久化的信息。

  3、Service Worker安装是在后台悄悄执行，更新也是如此。每次新唤起Service Worker线程，它都会去检查Service Worker脚本是否有更新，如有一个字节的变化，它都会新起一个Service Worker线程类似于安装一样去安装新的Service Worker脚本，当旧的Service Worker所服务的页面都关闭后，新的Service Worker便会生效

典型应用场景

• 1、离线缓存：可以将H5应用中不变化的资源或者很少变化的资源长久的存储在用户端，提升加载速度、降低流量消耗、降低服务器压力。如中重度的H5游戏、框架数据独立的web资讯客户端、web邮件客户端等
• 2、消息推送：激活沉睡的用户，推送即时消息、公告通知，激发更新等。如web资讯客户端、web即时通讯工具、h5游戏等运营产品。
• 3、事件同步：确保web端产生的任务即使在用户关闭了web页面也可以顺利完成。如web邮件客户端、web即时通讯工具等。
• 4、定时同步：周期性的触发Service Worker脚本中的定时同步事件，可借助它提前刷新缓存内容。如web资讯客户端。

https://caniuse.com/#search=service%20worker

浏览器支持情况

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/?q=category%3Aofflinestorage

https://webkit.org/status

https://x5.tencent.com/tbs/index.html

x5.tencent.com

生命周期

项目优化实践

• 资讯特点：




1、由两个页面构成，一个首页，一个详情页，且通过url传参给到后端，获取数据渲染页面。


2、静态资源方面，有一部分js来自第三方，如aladdin
3、接口会排除缓存之外，返回。目前资讯采取，缓存项目的静态资源，第三方js排除，接口排除

• 1.常期维护的活动页，比如：新客福利，和盈寿险页面，还有业务员时常要推广的页面，可以考虑使用pwa。因为PWA 打开后会缓存一些内容，之后再次访问即使没有网络也可以浏览之前的页面（如同IE时代的离线浏览）可以离线访问，往常的网页应用只要关闭了网页他的生命就结束了，现在引入了一个 Service Worker 的概念，即使网页关闭，PWA 仍然可以在后台运行获取数据更新，还有业务员只有把页面添加到主屏幕，无需到处查找页面，方便浏览。
• 2。其他日常活动页面，可以缓存public.js，能够让活动页面响应显示更快，还有pwa只要修改一处就可以清楚页面缓存，解决了修改缓存刷cdn，修改版本号，节省了时间。
• 3.对于一些推送信息页面也可以使用pwa，因为Service Workers 有一个基于事件的 cache 系统和消息推送的一套新的 API，用户只要允许，即使网页关闭后仍然可以在系统通知栏收到推送消息

优化效果度量

If you can't measure it, you can't improve it

如果问题无法度量，也就无从改进

—— Lord Kelvin

https://fjut.github.io/interest-group/PWA_AMP_MIP/docs/fjut.github.io_2017-06-06_23-52-57.report.html

https://fjut.github.io/interest-group/PWA_AMP_MIP/docs/fjut.github.io_2017-06-06_23-53-47.report

AMP、MIP

MIP是Mobile Instant Pages的简称，也就是移动网页加速器，是一套应用于移动网页的开放性技术标准,使用 MIP无需等待加载,页面内容将以更友好的方式瞬时到达用户。其核心价值是提升了移动端渲染能力。

http://zhanzhang.baidu.com/college/courseinfo?id=912&page=1

MIP 加速原理

https://www.mipengine.org/doc/03-principle-of-mip.html

1. 经过精心设计的JavaScript
2. 所有静态资源需要标明尺寸
3. 不允许任何机制阻止页面渲染
4. 控制外部资源加载
5. 封装交互功能
6. 只允许inline的css
7. 只允许GPU加速的动画
8. MIP 缓存