javascript - workbox serviceworker working everywhere except Chrome: Uncaught (in promise) DOMException - Stack Overflow

admin管理员组

文章数量:1332595

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.

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.

• javascript
• webpack
• workbox
• workbox-webpack-plugin

Share Improve this question Follow edited Jan 16, 2019 at 18:57 user3531149 asked Jan 15, 2019 at 11:34 user3531149user3531149 1,53933 gold badges3131 silver badges4949 bronze badges 3

• Hi, did u ever figure this out? I'm getting the exact same errors, works in other browsers & incognito.. tried deleting all cache/history nothing works... any suggestions? – webkit Commented Feb 3, 2019 at 15:11
• never mind, got it working... In the 'clear cache' window in chrome went over to the advanced tab, hit every checkbox, did it for all time, and no more error.. strange! – webkit Commented Feb 3, 2019 at 15:20
• Chrome updated itself, now its fixed for me and all coworkers, I have Chrome 72 now – user3531149 Commented Feb 6, 2019 at 21:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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.

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

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.:443 ssl;

    ...

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

(nginx configuration)

本文标签：