When learning about JavaScript it remends using async/await as it's much more readable than .then, and I agree. Unfortunately when it es 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.

When learning about JavaScript it remends using async/await as it's much more readable than .then, and I agree. Unfortunately when it es 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.

• javascript
• async-await
• progressive-web-apps

Share Improve this question Follow asked Jan 1, 2021 at 13:35 run_the_racerun_the_race 2,44833 gold badges5555 silver badges8585 bronze badges 1

• 1 Side note: I haven't played with service workers nearly enough, but I'm 99.9% sure your final console.log will say the worker is installed prematurely. I suggest putting that call at the end of install, rather than after the waitUntil call. waitUntil just tells the event subsystem that the work is ongoing. I very much doubt it blocks the thread. (But again, I haven't played with service workers enough yet.) – T.J. Crowder Commented Jan 1, 2021 at 13:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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));
// −−−−−−−−−−−−−−−−−−−−^−−−−−−−−−−−−−−−−−−−−−−−−−^