Service Worker 中的缓存未定义答案

【问题标题】：Cache in service worker is undefinedService Worker 中的缓存未定义
【发布时间】：2018-03-04 16:01:24
【问题描述】：

我在注册 Service Worker 时遇到问题。当我尝试注册它时，浏览器抱怨“未捕获（承诺）TypeError：无法读取未定义的属性'addAll'”它在第6行中断，我尝试将所有添加到缓存中。我认为 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);
    })
);
});

【问题讨论】：

您使用的浏览器是否支持cache api？ developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/…
是的，我正在使用 Chorme 61
你试图用第二个'\'缓存什么？

标签： javascript node.js caching service-worker html5-appcache

【解决方案1】：

似乎 Cache API 在您用于查看网站的浏览器中不起作用。

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

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

【讨论】：

这条评论帮助我解决了我遇到的服务工作者无法使用本地缓存的问题，服务工作者依赖于本地缓存，并且在这个 Visual Studio 生成的 Chrome 窗口的上下文中无法正常运行.
因为这个我正要提交一个 Chrome 错误......这种行为太愚蠢了。他们至少可以在错误消息中告诉您缓存 API 在这种情况下不起作用。

【解决方案2】：

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

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

不过，它似乎对 localhost 很宽容。

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

260 个字符路径是任何人所需要的全部

【解决方案4】：

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

const { caches } = self;

更新：

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

欢迎 :)

【讨论】：