workbox serviceworker working everywhere except Chrome: Uncaught (in promise) DOMException

问题

Workbox is not working on Chrome, but it works everywhere else, which is ironic since I believe this is a Google library, the error that shows is :

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

Chrome:

Opera

Firefox

I'm using the 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 (entry)

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

EDIT: This is the line of code that throws the error

EDIT 2: it actually works on icognito mode, removing browser data still doesn't help.

EDIT 3: Updating to the newest beta 1, is even worse, since aside from the last errors it will show another one, however, this version works in Chrome's icognito mode and other browsers too.

回答1:

This error is usually thrown if the browser is out of allocated disk space quota. Your incognito is working because it will be allocated with new disk quota, where as normal tabs share same disk quota.

Can you open Application tab in devtools and click on Clear storage > Clear site data? This should fix this issue in most of the cases.

回答2:

Chrome autoupdated to version 72 and now it works for me and my colleagues. Its most probably a fixed bug.

回答3:

You might have the scope of your SW file wrong. Try this:

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

If you can not move the SW file you need to add a special header to your backend:

Server {

    listen www.example.com:443 ssl;

    ...

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

(nginx configuration)

来源：https://stackoverflow.com/questions/54198028/workbox-serviceworker-working-everywhere-except-chrome-uncaught-in-promise-do

标签

javascript

Webpack

workbox

workbox-webpack-plugin