Service Worker安装失败:"无法读取属性'addAll of undefined"

Question

所以我会保持简洁:在尝试安装时,我的服务工作者会失败.这是我的所有代码sw.js:

var cacheName = 'randomstring';
var filesToCache = [ '/' ];

self.addEventListener('install', function (e) {
    console.log('[ServiceWorker] Install');
    e.waitUntil(
        caches.open(cacheName)
            .then(function (cache) {
                console.log('[ServiceWorker] About to fail');
                return cache.addAll(filesToCache);
            })
    );
});

我得到一个例外,因为cache是undefined(cache.addAll在位上).

不确定为什么会这样？

我之前使用过服务工作者,从未遇到过这个问题.这是我第一次使用带有ASP.Net后端的服务工作者,所以不确定这是不是问题？

Answer 1

所以,我想出来了.我打算投票来结束这个问题,但我想我会把它留在这里,因为我看到其他一些人不知道如何解决这个问题.即使它是超级愚蠢的:)(或者更确切地说,我是).

所以我通过"播放"按钮运行网站,又称"开始调试",在Visual Studio 2017中,启动一个特殊的Chrome窗口,其中将抛出上述错误.

要解决这个问题,我可以(或者你可以,未来的网络旅行者)在没有调试的情况下开始,在IIS中托管网站等.

编辑:如果有一个更好的解决方法,我可以在调试模式下使用服务工作者,请建议它,我会将其标记为答案.但是对于我的具体问题,上面的解决方法很好:).

Answer 2

遇到了同样的问题，找到了一些其他的方法。

VS 在调试时识别“chrome.exe”并添加一些参数，这就是为什么 Service Worker 无法工作。

有一个选项 Debug => Option => Debugging => General => Enable javascript debugging for asp.net (Chrome, Edge and FireFox)。如果你不想在 vs 中使用 js 调试 - 就像我一样，因为我使用 chrome 进行 js 调试 - 只需停用此选项，服务工作者就会工作。 VS 在 Chrome 中启用 JS 调试

或者，您可以将 chrome 添加为新的“浏览器”并切换浏览器进行调试。因为 vs 识别“chrome.exe”通过管理命令行“mklink chromedirect.exe chrome.exe”创建符号链接，并将其添加为 Visual Studio 中的新浏览器。

这可以在“播放”上下文菜单 => 浏览方式下完成。 VS 播放上下文菜单

只需添加不带任何参数的 chromedirect.exe 和一个友好的名称，如“Google Chrome Direct”。之后，您可以切换到浏览器并选择是否需要 VS JS 调试。