Ytukyg

In a simple JavaScript Service Worker I want to intercept a request and read a value from IndexedDB before the event.respondWith

But the asynchronous nature of IndexDB does not seem to allow this.

Since the indexedDB.open is asynchronous, we have to await it which is fine. However, the callback (onsuccess) happens later so the function will exit immediately after the await on open.

The only way I have found to get it to work reliably is to add:

var wait = ms => new Promise((r, j) => setTimeout(r, ms));

await wait(50)

at the end of my readDB function to force a wait until the onsuccess has completed.

This is completely stupid!

And please don't even try to tell me about promises. They DO NOT WORK in this circumstance.

Does anyone know how we are supposed to use this properly?

Sample readDB is here (all error checking removed for clarity). Note, we cannot use await inside the onsuccess so the two inner IndexedDB calls are not awaited!

async function readDB(dbname, storeName, id) {

    var result;

    var request = await indexedDB.open(dbname, 1); //indexedDB.open is an asynchronous function

    request.onsuccess = function (event) {

        let db = event.target.result;

        var transaction = db.transaction([storeName], "readonly"); //This is also asynchronous and needs await

        var store = transaction.objectStore(storeName);

        var objectStoreRequest = store.get(id); //This is also asynchronous and needs await

        objectStoreRequest.onsuccess = function (event) {

            result = objectStoreRequest.result;

        };

    };



    //Without this wait, this function returns BEFORE the onsuccess has completed

    console.warn('ABOUT TO WAIT'); 

    var wait = ms => new Promise((r, j) => setTimeout(r, ms));

    await wait(50)

    console.warn('WAIT DONE');

    return result;

}

And please don't even try to tell me about promises. They DO NOT WORK in this circumstance.

...

...

...

I mean, they do, though. Assuming that you're okay putting the promise-based IndexedDB lookups inside of event.respondWith() rather than before event.respondWith(), at least. (If you're trying to do this before calling event.respondWith(), to figure out whether or not you want to respond at all, you're correct in that it's not possible, since the decision as to whether or not to call event.respondWith() needs to be made synchronously.)

It's not easy to wrap IndexedDB in a promise-based interface, but https://github.com/jakearchibald/idb has already done the hard work, and it works quite well inside of a service worker. Moreover, https://github.com/jakearchibald/idb-keyval makes it even easier to do this sort of thing if you just need a single key/value pair, rather than the full IndexedDB feature set.

Here's an example, assuming you're okay with idb-keyval:

importScripts('https://cdn.jsdelivr.net/npm/idb-keyval@3/dist/idb-keyval-iife.min.js');



// Call idbKeyval.set() to save data to your datastore in the `install` handler,

// in the context of your `window`, etc.



self.addEventListener('fetch', event => {

  // Optionally, add in some *synchronous* criteria here that examines event.request

  // and only calls event.respondWith() if this `fetch` handler can respond.



  event.respondWith(async function() {

    const id = someLogicToCalculateAnId();

    const value = await idbKeyval.get(id);



    // You now can use `value` however you want.

    const response = generateResponseFromValue(value);



    return response;

  }())

});