Service Worker 提供旧版本的自身答案

【问题标题】：Service Worker giving out old version of itselfService Worker 提供旧版本的自身
【发布时间】：2018-02-10 00:16:48
【问题描述】：

由于某种原因，我的 Service Worker 似乎在交付自己的过时版本。

所以，基本上，当我重建网站时，PROJECT.buildhash 会得到一个新生成的随机字符串，然后用于设置 CACHE 版本。

最新的缓存版本是唯一被添加到白名单数组中的版本。

请注意我如何在底部的activate 事件侦听器中使用console.log 来显示当前激活的缓存版本和提供文件的版本。它不断给我旧版本的 service worker 版本号。

因此，当我构建网站时，会生成一个控制 service worker 的 sw.js 文件。我浏览该网站并安装它。现在我对代码进行了一些更改来重建网站，但是当我更新网站时，服务人员没有得到更新。

我更新worker的唯一方法是完全删除缓存。

/* global caches, Promise, fetch, PROJECT, self */

'use strict';

var CACHE = {
    version: PROJECT.version + "-" + PROJECT.buildhash,
    resources: [
        '/index.html'
    ]
};

self.addEventListener('install', function (event) {
    event.waitUntil(
            caches.open(CACHE.version).then(function (cache) {
        return cache.addAll(CACHE.resources);
    })
            );
});

self.addEventListener('fetch', function (event) {
    event.respondWith(
            caches.match(event.request).then(function (resp) {
        return resp || fetch(event.request).then(function (response) {
            return caches.open(CACHE.version).then(function (cache) {
                cache.put(event.request, response.clone()).catch(function (error) {
                    console.log('Could not add to cache!' + error);
                });
                return response;
            }).catch(function (error) {
                console.log('Could not open cache!' + error);
            });
        }).catch(function (error) {
            console.log('Resource not found!' + error);
        });
    }).catch(function (error) {
        console.log('Resource not found in the cache!' + error);
    })
            );
});

self.addEventListener('activate', function (event) {
    var cacheWhitelist = [CACHE.version];
    event.waitUntil(
            caches.keys().then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
            if (cacheWhitelist.indexOf(key) === -1) {
                return caches.delete(key);
            }
        }));
    }).then(() => {
        console.log("Cache version " + CACHE.version + " was activated.");
    }));
});

【问题讨论】：

如果这只是调试场景 -devtools- 并且您需要强制重新加载工作器，您可以.. 使用重新加载按钮上的 rightClik 硬刷新强制新 SW 并将放入“卸载“ 状态。从那里您可以导航离开和返回，并将拥有新的 SW

标签： javascript caching service-worker

【解决方案1】：

您可能需要在 Service Worker 中实现 clients.claim() 和 self.skipWaiting() 才能使更改生效。还有更多关于更新你的服务人员here。

另一种可能性是，除非来自服务器的 Service Worker 响应发生变化，否则 Service Worker 不会更新。您是否有可能正在执行任何可能阻止您的新服务工作者版本更新的服务器端缓存？您可以尝试直接点击文件并确保缓存名称正确。

【讨论】：