二. 一个简单的示例
该示例展示了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丢给前端。