# 安装

一般在这个阶段,我们会做一些预加载工作

# 简单的例子


var ver = '1';
var cacheList = ['/index.html', 'js/base.js'];

self.addEventListener('install', function (event) {
    event.waitUntil(caches.open(ver).then(function (cache) {
        return cache.addAll(cacheList);
    }).then(function () {
        return self.skipWaiting()
    }).catch(function (err) {
        console.log(err);
    }))
});

事件对象 Event -> ExtendableEvent -> InstallEvent

在这里我们会准备一个列表,用来在安装的时候预先加载一些资源。当然,这种方法还是比较粗暴的,因为任何的字节变动都会导致 service worker 进入安装阶段,导致缓存的版本并未修改,而缓存却重新创建。

如果是首次启用 service worker 的话,安装结束后,会毫不犹豫的进入激活阶段,但是,如果已经有 service worker 启动的话,需要所有加载的页面都不再使用旧的 service worker 后才会进入激活阶段。

但是我们可以使用 self.skipWaiting() 来跳过等待直接进入激活状态,但是这种情况下,在激活阶段一定要调用 Clients.claim() 来确保所有的client重新加载使用新的 service worker

# 实践

在实际的开发过程中,尽量不要使用上面的实例, 而是通过自己判断预加载列表和缓存中的值是否匹配,没有的话加载,版本不一致的话,就要更新。

# ExtendableEvent.waitUntil()

详情

ExtendableEvent.waitUntil() 方法告诉事件分发器该事件仍在进行。这个方法也可以用于检测进行的任务是否成功。在服务工作线程中,这个方法告诉浏览器事件一直进行,直至 promise 解决,浏览器不应该在事件中的异步操作完成之前终止服务工作线程。

服务工作线程(service workers)中的 install 事件使用 waitUntil() 来将服务工作线程保持在 installing 阶段。如果传入 waitUntil() 的 promise 被拒绝,则将此次安装视为失败,丢弃这个服务工作线程。这主要用于确保在服务工作线程安装以前,所有依赖的核心缓存都已经成功载入。

服务工作线程(service workers)中的 activate 事件使用 waitUntil() 来延迟函数事件,如 fetch 和 push,直至传入 waitUntil() 的 promise 被解决。这让服务工作线程有时间更新数据库架构(database schema)和删除过时缓存(caches),让其他事件能在一个完成更新的状态下进行。

waitUntil() 方法最初必须在事件回调里调用,在此之后,方法可以被调用多次,直至所有传入的 promise 被解决。