Service Worker 版本更新

/sw.js 控制着页面资源和请求的缓存，那么如果缓存策略需要更新呢？也就是如果 /sw.js 有更新怎么办？/sw.js 自身该如何更新？

如果 /sw.js 内容有更新，当访问网站页面时浏览器获取了新的文件，逐字节比对 /sw.js 文件发现不同时它会认为有更新启动 更新算法，于是会安装新的文件并触发 install 事件。但是此时已经处于激活状态的旧的 Service Worker 还在运行，新的 Service Worker 完成安装后会进入 waiting 状态。直到所有已打开的页面都关闭，旧的 Service Worker 自动停止，新的 Service Worker 才会在接下来重新打开的页面里生效。

自动更新所有页面

如果希望在有了新版本时，所有的页面都得到及时自动更新怎么办呢？可以在 install 事件中执行 self.skipWaiting() 方法跳过 waiting 状态，然后会直接进入 activate 阶段。接着在 activate 事件发生时，通过执行 self.clients.claim() 方法，更新所有客户端上的 Service Worker。

看一下具体实例：

12345678910111213141516171819202122232425// 安装阶段跳过等待，直接进入 activeself.addEventListener('install', function (event) {
    event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', function (event) {
    event.waitUntil(        Promise.all([            // 更新客户端
            self.clients.claim(),            // 清理旧版本
            caches.keys().then(function (cacheList) {                return Promise.all(
                    cacheList.map(function (cacheName) {                        if (cacheName !== 'my-test-cache-v1') {                            return caches.delete(cacheName);
                        }
                    })
                );
            })
        ])
    );
});

另外要注意一点，/sw.js 文件可能会因为浏览器缓存问题，当文件有了变化时，浏览器里还是旧的文件。这会导致更新得不到响应。如遇到该问题，可尝试这么做：在 Web Server 上添加对该文件的过滤规则，不缓存或设置较短的有效期。

手动更新 Service Worker

其实在页面中，也可以手动借助 Registration.update() 更新。

参考如下示例：

123456789var version = '1.0.1';

navigator.serviceWorker.register('/sw.js').then(function (reg) {    if (localStorage.getItem('sw_version') !== version) {
        reg.update().then(function () {
            localStorage.setItem('sw_version', version)
        });
    }
});

debug 时更新

Service Worker debug 技巧 中也会提到, Service Worker 被载入后立即激活可以保证每次 /sw.js 为最新的。

代码如下：

123self.addEventListener('install', function () {
    self.skipWaiting();
});

意外惊喜

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

Set request’s cache mode to “no-cache” if any of the following are true:

• registration’s use cache is false.

• job’s force bypass cache flag is set.

• ewestWorker is not null, and registration’s last update check time is not null and the time difference in seconds calculated by the current time minus registration’s last update check time is greater than 86400.