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

user_3531149 0
Viewed 4409

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:

enter image description here

Opera enter image description here

Firefox enter image description here

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

enter image description here

enter image description here

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

enter image description here

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.

enter image description here

workbox-webpack-plugin workbox webpack javascript
3 Answers

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.

Disk Quota

user_26270220

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

user_35311490

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)

user_11674720
Related