javascript - 工作箱服务人员在除 Chrome 之外的任何地方工作：未捕获（承诺）DOMException

Question

Workbox 不能在 Chrome 上运行，但它可以在其他任何地方运行，这很讽刺，因为我相信这是一个谷歌库，显示的错误是：

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

铬合金：

歌剧

火狐

我正在使用 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：它实际上适用于 icognito 模式，删除浏览器数据仍然无济于事。

编辑 3：更新到最新的 beta 1 更糟糕，因为除了最后一个错误，它还会显示另一个错误，但是，这个版本也适用于 Chrome 的 icognito 模式和其他浏览器。

Answer 1

如果浏览器超出分配的磁盘空间配额，通常会引发此错误。您的隐身模式正在工作，因为它将分配有新的磁盘配额，而普通选项卡共享相同的磁盘配额。

您可以Application在 devtools 中打开选项卡并单击Clear storage > Clear site data吗？在大多数情况下，这应该可以解决此问题。

Answer 2

Chrome 自动更新到 72 版，现在它适用于我和我的同事。它很可能是一个固定的错误。

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配置）