除Chrome之外的所有地方都可以使用的workbox服务工作人员：未捕获（承诺）DOMException

Question

Workbox不能在Chrome上运行，但可以在其他任何地方使用， 具有讽刺意味的是，因为我认为这是一个Google图书馆， 显示的错误是：

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

Chrome浏览器：

歌剧

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： 它实际上可以在icognito模式下运行，删除浏览器数据仍然无济于事。

编辑3： 更新到最新的Beta 1更加糟糕，因为除了上一个错误之外，它还会显示另一个错误，但是此版本可在Chrome的icognito模式和其他浏览器中使用。

Answer 1

如果浏览器没有足够的磁盘空间配额，通常会引发此错误。 您的隐身模式之所以有效，是因为它将分配新的磁盘配额，而普通标签页会共享相同的磁盘配额。

您可以在devtools中打开Application标签并单击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配置）