JavaScript how to use event.waitUntil() to wait for an async function call

user_5506400 0
Viewed 886

When learning about JavaScript it recommends using async/await as it's much more readable than .then, and I agree. Unfortunately when it comes to PWA service workers, async seems to be forgotten.

When trying to create an install function for a service worker with async style:

const cacheVersion = "v1";
const cacheAssets = [
    "/",
    "/index.html",
    "/static/img/logo.svg",
];

async function install(version, assets) {
    const cache = await caches.open(version);
    console.log("Doing stuff....");
}

self.addEventListener("install", (event) => {
    console.log("Service Worker INSTALL START");
    event.waitUntil(install, cacheVersion, cacheAssets); // <--- Does not call install()
    console.log("Service Worker INSTALL COMPLETE");
});

The install function is never run. If I change this line:

event.waitUntil(install, cacheVersion, cacheAssets);

to

install(cacheVersion, cacheAssets);

Then the line is run, but not waited for, causing problems.

How does one use event.waitUntil to call an async function and wait for it?

To me event.waitUntil is like await, so why have this weird special function that blocks the main loop, when it seems like nothing else in JS does? Just seems so strange to me.

progressive-web-apps async-await javascript
1 Answers

install isn't called because you don't call it. waitUntil accepts a promise, not a function. An async function isn't a promise, it's a function that returns a promise.

Call your function and pass the promise it returns into waitUntil:

event.waitUntil(install(cacheVersion, cacheAssets));
// −−−−−−−−−−−−−−−−−−−−^−−−−−−−−−−−−−−−−−−−−−−−−−^
user_1572470
Related