Question

由于某种原因，我的服务工作者似乎正在提供过时的版本。

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

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

请注意我在activate事件监听器中，在底部，如何使用console.log来显示当前激活的缓存版本和服务文件。它不断给我旧版本的服务工作者版本号。

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

我更新工作人员的唯一方法是完全删除缓存。

/* 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.");
    }));
});

Answer 1

您可能需要在服务工作者中实施clients.claim()和self.skipWaiting()，以使更改生效。有关更新服务工作者here的更多信息。

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

服务工作者发布自己的旧版本

1 个答案: