How to use async callback to determine resource to cache in workbox precacheAndRoute

Viewed 22

In my service worker, I'm making use of workbox's precacheAndRoute from workbox-precaching. I want to cache files paths that already exist on IndexedDB since it varies across users. My code looks like this:

import { precacheAndRoute } from 'workbox-precaching';
import localforage from "localforage";

let formID;

const cachedFilesStore = localforage.createInstance({
    name: 'page-id',
    storeName: 'store'
})

const produceValuesFromCache = () => {
    return cachedFilesStore.getItem('1')
        .then(async (value) => {
            formID = formID || value.form_id;
            const cachedFiles = await cachedFilesStore.getItem(`${formID}`)
            return [
                ...cachedFiles.manifest,
                `/form/${formID}`
            ]
        });
}

precacheAndRoute([], {
    urlManipulation: async ({ url }) => {
        const files = await produceValuesFromCache();
        return files
    }
})

It doesn't work as expected, instead I see an error like so: Uncaught TypeError: additionalURLs is not iterable. What am I doing wrong?

The code that dumps the files in IndexedDB is in the index.html file which is located at route form/${formID.

0 Answers
Related