CacheStorage.open() 在 Chrome 中返回 undefined答案

【问题标题】：CacheStorage.open() returning undefined in ChromeCacheStorage.open() 在 Chrome 中返回 undefined
【发布时间】：2018-04-11 11:58:48
【问题描述】：

我的爱好网站上有一个服务人员，其 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，所以当我尝试在 core 上调用 put 时会引发错误。 According to the docs，这应该是不可能的。知道这里发生了什么吗？

【问题讨论】：

标签： javascript google-chrome browser-cache

【解决方案1】：

原来Visual Studio打开的谷歌浏览器窗口不能使用缓存API，只是默默返回undefined。如果您手动打开 Chrome 窗口，它就可以正常工作。

确实应该有一个控制台警告，这样开发者就不会浪费时间为此挠头了……

【讨论】：

我从昨天开始就一直在寻找解决这个问题的方法，你帮我省了很多麻烦。非常感谢！

【解决方案2】：

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

基本上，Visual Studio 设置的 --user-data-dir 开关“太长”，会破坏 Chrome 中的 service-worker 缓存 API。

您应该能够在 Visual Studio 中解决此问题，方法是使用“浏览方式...”选项将 Chrome 设置为在没有自定义 --user-data-dir 的情况下启动（或设置您自己的）。

【讨论】：