Uncaught (in promise) DOMException: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing

Hi there, I have issues on my Chrome.

Library Affected: workbox-sw

Browser & Platform: Google Chrome Version 78.0.3904.70 (Official Build) (64-Bit)

Issue or Feature Request Description:

Extra info on the behaviour:

• When I empty the application cache, the error only happens on the second time (when the service worker starts working I guess)

• The behaviour does not occur in an anonymous window under the same conditions ( same browser / OS).

• when I run the website on a regular chrome tab, I do not see any databases under indexedDB.

• when I do the same on the anonymous window, I can see the databases.

Stack trace

DBWrapper.mjs:206 Uncaught (in promise) DOMException: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing.
    at https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-core.prod.js:1:3581
    at new Promise (<anonymous>)
    at x.transaction (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-core.prod.js:1:3546)
    at async x.u (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-core.prod.js:1:3700)
    at async x.put (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-core.prod.js:1:4133)
    at async o.setTimestamp (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-expiration.prod.js:1:562)
    at async updateTimestamp (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-expiration.prod.js:1:1532)
    at async Object.cacheDidUpdate (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-expiration.prod.js:1:2563)
    at async Object.put (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-core.prod.js:1:2191)
(anonymous) @ DBWrapper.mjs:206
transaction @ DBWrapper.mjs:205

My sw.js

Nothing special, I even haven’t touched it for months and it worked all the time fine.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

workbox.routing.registerRoute(
    // Cache font awesome js files
    /^https:\/\/use\.fontawesome\.com/,
    new workbox.strategies.CacheFirst({
        cacheName: 'fontawesome-cache',
        plugins: [
            new workbox.cacheableResponse.Plugin({
                statuses: [0, 200],
            }),
            new workbox.expiration.Plugin({
                // Cache for a maximum of a week
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    }),
);

workbox.routing.registerRoute(
    // Cache font polyfill js files
    /^https:\/\/polyfill\.io/,
    new workbox.strategies.CacheFirst({
        cacheName: 'polyfill-cache',
        plugins: [
            new workbox.cacheableResponse.Plugin({
                statuses: [0, 200],
            }),
            new workbox.expiration.Plugin({
                // Cache for a maximum of a week
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    }),
);

// register fonts
workbox.routing.registerRoute(
    /\.(?:ttf|woff|woff2)$/,
    new workbox.strategies.CacheFirst({
        cacheName: 'fonts-cache',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 60,
                maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
            }),
        ],
    }),
);


workbox.precaching.precacheAndRoute(self.__precacheManifest || []);


const staticCacheName = `pwa-v${new Date().getTime()}`;
const filesToCache = [
    '/offline',
    '/favicon/android-chrome-192x192.png',
    '/favicon/android-chrome-256x256.png',
    '/favicon/splashscreen/icon-512x512.png',
    '/images/pages/login/background.jpg',
    '/images/pages/login/background-blur.jpg',
];

// Cache on install
self.addEventListener('install', (event) => {
    this.skipWaiting();
    event.waitUntil(
        caches.open(staticCacheName)
            .then((cache) => cache.addAll(filesToCache)),
    );
});

// Clear cache on activate
self.addEventListener('activate', (event) => {
    event.waitUntil(
        caches.keys().then((cacheNames) => Promise.all(
            cacheNames
                .filter((cacheName) => (cacheName.startsWith('pwa-')))
                .filter((cacheName) => (cacheName !== staticCacheName))
                .map((cacheName) => caches.delete(cacheName)),
        )),
    );
});


self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request)
            .then((response) => response || fetch(event.request))
            .catch(() => caches.match('offline')),
    );
});

There is an old issue here https://github.com/GoogleChrome/workbox/issues/1661, however, I could not find the real solution to it.

Thanks!

[banxter]

i have the same problem… in fact… its not just when i clear site data in devTools -> Application -> Clear Storage… it happens when webApp starts fo the first time too… it happens when you use Expiration plugin of workbox… at first run serviceworker just installs, and in seccond navigation or page refresh, when serviceworker begins its work, this error happens as much as you used Expiration Plugin in the SW code… it resolves if you unregister the SW and refresh the page… in this case SW works fine… but before unregister, this error happens every time you refresh the page or navigate to other pages… please help if have a solution for that…

[jeffposnick]

@bilalesi, that screenshot shows that you’re on Workbox v4.3.1, which is very outdated.

If you can reproduce the issue with the most recent Workbox release, please open a new issue with details and reproduction steps, and we’ll investigate. Thanks!