IndexedDB integration for service workers

[CodingDoug]

Normal IndexedDB persistence support works great for me so far. However, it doesn't work at all in a service worker because the persister is only trying to find the indexedDB object on the window object as you can see here:

tinybase/src/persisters/persister-indexed-db.ts

Line 61 in 9344fb5

const request = WINDOW.indexedDB.open(dbName, create ? 2 : undefined);

Error at runtime:

TypeError: Cannot read properties of undefined (reading 'indexedDB')

window just isn't present in service workers. Instead, service workers have access to indexedDB via ServiceWorkerGlobalScope (inherits from WorkerGlobalScope) as a top-level property. In TypeScript:

declare const self: ServiceWorkerGlobalScope
const indexedDB = self.indexedDB

One imagines this entrypoint to a indexedDB object is functionally identical. It would be great if the persister looked in both window and the service worker global scope to find an indexedDB property. This would make TinyBase incredibly more useful for PWAs!

[jamesgpearce]

Awesome. Let's do it.

[CodingDoug]

I've put together a super fast hack and confirmed that this works to allow a query on an indexeddb from a service worker, where WINDOW will be undefined:

      let db;
      if (WINDOW) {
        db = WINDOW.indexedDB;
      }
      else {
        db = indexedDB;
      }
      const request = db.open(dbName, create ? 2 : undefined);

No idea if this is the best way to check, or how this holds up under different circumstances, or how you would even write a decent test for it.

As far as I can tell, you could also get away with writing it like this, without using WINDOW at all, and assuming that indexedDB shows up somewhere in the global scope in both cases:

      const request = indexedDB.open(dbName, create ? 2 : undefined);