workbox serviceworker在除Chrome之外的任何地方工作: Uncaught (in promise) 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');
  }); 
}

EDIT:这是抛出错误的代码行

​

​

​

​

编辑2:它实际上在icognito模式下工作，删除浏览器数据仍然没有帮助。

​

​

编辑3:更新到最新的测试版1更糟糕，因为除了最新的错误之外，它还会显示另一个错误，然而，这个版本也可以在Chrome的icognito模式和其他浏览器中运行。

​

​

Answer 1

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

你能在devtools中打开Application标签并点击Clear storage > Clear site data吗？在大多数情况下，这应该可以解决这个问题。

​

​

Answer 2

Chrome自动升级到了72版本，现在它适用于我和我的同事。它很可能是一个已修复的bug。

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