Workbox服务工作者在除Chrome以外的所有地方都能正常工作：未捕获（承诺）DOM异常。

Question

Workbox在Chrome上无法工作，但在其他地方可以工作， 这是非常讽刺的，因为我相信这是一个Google库， 显示的错误是：

Uncaught (in promise) DOMException : sw.js line 1

Chrome:

Opera

Firefox

我正在使用workbox-webpack-plugin插件

webpack.config.js

    const workbox = require('workbox-webpack-plugin'); 

    module.exports = {
        plugins: [
            new workbox.GenerateSW({
                swDest: './service-worker.js',
                skipWaiting: true,
                clientsClaim: true
            })
        ]  
 }

index.ts（入口文件）

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/js/app/dist/service-worker.js');
  }); 
}

编辑：这是导致错误的代码行：

编辑 2： 它实际上在隐身模式下运行，删除浏览器数据仍然无法解决问题。

编辑 3： 升级到最新的 beta 1 版本后，情况变得更糟了，除了最后一个错误之外，它还会显示另一个错误，但是该版本在 Chrome 的隐身模式和其他浏览器中也可以正常工作。

- user3531149

---

你好，你最终解决了这个问题吗？我也遇到了完全相同的错误，在其他浏览器和隐身模式下都可以正常工作。尝试删除所有缓存/历史记录，但仍然无法解决问题... 有什么建议吗？ - webkit

没关系，我搞定了... 在 Chrome 的“清除缓存”窗口中，转到高级选项卡，勾选所有复选框，选择“全部时间”，然后没有错误了.. 奇怪！ - webkit

Chrome自动更新了，现在我和所有同事的问题都已经解决了，我现在使用的是Chrome 72。 - user3531149

Answer 1

通常情况下，如果浏览器的磁盘空间配额已用完，就会出现此错误。隐身模式可以正常工作，因为它将被分配新的磁盘配额，而普通标签共享相同的磁盘配额。

您可以在开发工具中打开“应用程序”选项卡，然后单击“清除存储 > 清除站点数据”吗？这通常可以解决大多数问题。

请参考以下图片：

- Ganapati V S

---

+1 可能硬盘上没有足够的可用空间。在这种情况下，您的浏览器可能无法为缓存保留一些空间。 - chestozo

你的意思是“未捕获（在承诺中）DOM异常：超出配额”，但这不是此问题的情况。正如编辑2中所述：我已经尝试过删除数据，但没有成功。希望Gold能在这一点上帮助我。 - user3531149

我只读了第一个答案，这个答案一直在这里...真是太烦人了，我的硬盘没有空间了！奇怪的是它在Firefox中可以工作... - Bruno Tavares

我在我的文件系统中的Chrome配置文件夹中删除了Service Worker目录，问题得到了解决。 - cdauth

Answer 2

Chrome自动更新到版本72，现在它对我和我的同事都有效了。 很可能是一个已经修复的错误。

- user3531149

---

我正在使用Chrome 72和4.0.0-beta.1/workbox-sw.js，但刷新页面两到三次后仍然存在同样的问题。 - konghou

Answer 3

你可能将 SW 文件的作用域设置错误了。尝试这样做：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/js/app/dist/service-worker.js', { scope: '/' });
  }); 
}

如果您无法移动所需的SW文件，则需要向后端添加特殊标头：

Server {

    listen www.example.com:443 ssl;

    ...

    location /js/app/dist/service-worker.js {
        add_header 'Service-Worker-Allowed' '/';
    }
}

（nginx配置）

- NickHTTPS

---

作用域 / 抛出异常，使用作用域“js/app/dist”的相同代码片段可以工作，但显示了上面所有的异常。 - user3531149

来自MDN：Service Worker仅会捕获服务工作者范围内的客户端请求。服务工作者的最大范围是工作者的位置。您还可以从后端添加标头。因此，看起来您的SW不在应用程序的根目录中。 - NickHTTPS

js/app/dist 是正确的范围，这是 webpack 生成文件的位置，但我刚试着将其移动到 / 范围，它可以工作，但并没有修复错误，如我所说，隐身模式仍然可以工作。 - user3531149

我在想你的Chrome浏览器是否安装了某个插件导致了软件出现问题。你能否在Browserstack或另一台笔记本电脑上进行测试？我想不到其他的解决办法了。也许这里的其他用户能够提供帮助！ - NickHTTPS

我刚刚禁用了所有扩展程序，但是得到了相同的结果，也在我的同事电脑上尝试了一下，结果也是一样的 :/ - user3531149