Service Worker 标记为冗余答案

【问题标题】：Service Worker marked as redundantService Worker 标记为冗余
【发布时间】：2019-07-08 08:59:26
【问题描述】：

Service Worker 不会安装，并且会一直处于冗余状态。刷新页面将添加更多处于冗余状态的 Service Worker（灰色指示符）。

我已经在 self.addEventListener 函数参数中尝试了 console.log("installed") 并且它有效。 Service Worker 被标记为已激活并正在运行（绿色指示灯）

下面会让service worker变得多余

self.addEventListener("install", function (event) {
    event.waitUntil(
        caches.open(CACHE_NAME).then(function (cache) {
            var newImmutableRequests = [];
            return Promise.all(
                immutableRequests.map(function (url) {
                    return caches.match(url).then(function (response) {
                        if (response) {
                            return cache.put(url, response);
                        } else {
                            newImmutableRequests.push(url);
                            return Promise.resolve();
                        }
                    });
                })
            ).then(function () {
                return cache.addAll(newImmutableRequests.concat(mutableRequests));
            });
        })
    );
});

下面会起作用，但它不会缓存文件

self.addEventListener("install", function (event) {
    console.log("installed");
});

我希望 Service Worker 已安装并能够缓存文件，但它反而进入了冗余状态。

【问题讨论】：

标签： javascript promise service-worker service-worker-events

【解决方案1】：

检查控制台是否有错误。如果服务人员失败，它将进入“冗余”状态。

您的代码中至少存在一个问题：

return caches.match(url).then(function (response) {

应该是cache 没有s，对吧？ caches 是全局缓存 API 接口，而在您的代码中，cache 是引用单个缓存实例的变量。

此外，为了更轻松地在代码中查找错误，请考虑添加错误处理。你的代码中没有任何 Promise.catch 处理程序，所以它只是吞下所有错误:)

【讨论】：