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

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

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

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

Answer 2

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

我几乎没有做过任何试验（版本73.0.3683.103（正式版本）（64位）），并且chrome似乎无法为您提供访问权限，也不会以不安全的来源构造缓存对象。

尽管它对本地主机似乎宽容。

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

Answer 3

今天早些时候遇到了这个问题，我们最终在Chromium上提交了此错误：

https://bugs.chromium.org/p/chromium/issues/detail?id=1054541

这里的根本原因（或至少一个根本原因）非常奇怪。如果在启动Chrome时，您或您的IDE将--user-data-dir开关设置为超过133个字符的路径，则服务工作者缓存API会崩溃，并且将始终返回未定义。最终，这是因为user-data-dir中的缓存存储路径已经很长了，并且最终达到Windows上260个char文件路径的限制。

如果可以将--user-data-dir设置为短于此的值，则应该可以正常工作。另一种选择是通过组策略在Windows上启用NTFS“长文件路径”。

Answer 4

caches 是 window 属性的一部分，但在新版本的 javascript 中，您可以通过它直接访问；

const { caches } = self;

更新：

web worker 无法直接访问全局状态或 DOM，您必须使用 self 来访问它，点击 here 了解更多信息

欢迎:)

服务工作缓存未定义

4 个答案: