CacheStorage.open() 在 Chrome 中返回未定义

Question

我的爱好网站上有一个 service worker，它有一个 install 事件处理程序，看起来像这样（在 TypeScript 中）：

/**
 * When the service worker is being intalled, download the required assets into a temporary cache
 * @param e The intall event
 */
function installHander(e: ExtendableEvent): void {
    "use strict";
    // Put updated resources in a new cache, so that currently running pages
    // get the current versions.
    e.waitUntil(caches.delete("core-waiting").then(() => {
        return caches.open("core-waiting").then((core) => {
            const resourceUrls = [
                "/",
                "/loading/",
                "/offline/",
                "/css/site.css",
                "/js/site.js"
            ];

            return Promise.all(resourceUrls.map((key) => {
                // Make sure to download fresh versions of the files!
                return fetch(key, { cache: "no-cache" })
                .then((response) => core.put(key, response));
            }))
            // Don't wait for the client to refresh the page (as this site is designed not to refresh)
            .then(() => (self as ServiceWorkerGlobalScope).skipWaiting());
        });
    }));
}

在 Firefox 中这工作得很好，但是 Chrome 65 从 caches.open("core-waiting") 返回 undefined，所以当我尝试调用 put 时抛出错误 core。 According to the docs，这应该是不可能的。知道这里发生了什么吗？

Answer 1

原来Visual Studio打开的GoogleChromewindow不能使用缓存API，只是默默[=19] =] 未定义。如果你手动打开一个 Chrome window，它工作得很好。

确实应该有一个关于此的控制台警告，这样开发人员就不会浪费时间为此挠头...

Answer 2

这实际上是由于这个 Chromium 错误：https://bugs.chromium.org/p/chromium/issues/detail?id=1054541

基本上，Visual Studio 设置的 --user-data-dir 开关是 "too long"，并打破 Chrome 中的 service-worker 缓存 API。

您应该能够在 Visual Studio 中解决这个问题，方法是使用 "Browse With..." 选项设置 Chrome 在没有自定义 --user-data-dir（或设置你自己的）。

CacheStorage.open() 在 Chrome 中返回未定义

CacheStorage.open() returning undefined in Chrome

javascript

google-chrome

browser-cache