html5的service worker,腾讯浏览服务-Service Worker

二. 一个简单的示例

该示例展示了Service Worker最基本的离线缓存应用，前端在原来的web应用中使用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中匹配。

该示例部署到服务器上之后，用户第一次打开index页面，仍然会从服务器上拉取，之后便去安装Service Worker，执行Service Worker中的install事件，浏览器会再次拉取需要缓存的资源，这一次的缓存是否从网络拉取取决于资源设置的过期时间。当install事件中的资源均拉取成功，Service Worker算是安装成功。如果有一个资源拉取失败，此次Service Worker安装失败，若用户下次再打开该页面，浏览器仍然会重复之前的安装流程尝试安装。

如果index页面的Service Worker安装成功，用户再次打开index页面发起的资源请求便会先经过Service Woker脚本的fetch事件，在该事件中前端开发可以通过编写逻辑控制请求从网络拉取还是从cache中读取或者自己构造一个response丢给前端。