服务工作者中的缓存未定义

Question

我在注册我的服务人员时遇到了问题。当我尝试注册它时，浏览器抱怨“未捕获（承诺）TypeError：无法读取未定义的属性'addAll'”它在第6行打破，我尝试将addAll添加到缓存中。我以为open方法创建了缓存对象，为什么它未定义？

"use strict";

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('test').then(function(cache) {
        return cache.addAll([
            '/index.html',
            '/'
        ]);
    })
);
});

self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', event => {
event.respondWith(
    caches.match(event.request).then(response => {
        return response || fetch(event.request);
    })
);
});

Answer 1

似乎Cache API无法在您用于查看站点的浏览器中运行。

我通过visual studio在调试模式下启动我的Web应用程序时出现了这个错误，它启动了它自己的Chrome实例。出于某种原因，Cache API在那里不起作用。

我在Chrome的常规实例中使用了那里看到的地址，一切正常。

Answer 2

我不确定您的网站和代码托管位置是什么，但我想我已经在这里找到了问题。

我做了很少的实验（版本73.0.3683.103（官方构建）（64位）），看起来chrome不会让你访问或以其他方式在不安全的起源上构建缓存对象。

尽管如此，它似乎对localhost很宽松。

编辑：在进一步挖掘信息/文档之后，我偶然发现了https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins，这也证实了http://localhost被视为安全。