Here is a service worker that caches only the basic starting files of the app,
self.addEventListener("fetch", event => {
event.respondWith( caches.match(event.request)
.then( cachedResponse => {
return cachedResponse || fetch(event.request);
} )
);
});
const cacheName0 = "bare-bones-of-the-app";
const mainResourcesToPrecache = [
"index.html",
"app.js",
"style.css"
];
self.addEventListener("install", event => {
event.waitUntil(
caches.open(cacheName0).then(cache => {
return cache.addAll(mainResourcesToPrecache);
})
);
});
So far so good. Now let's say this PWA is a game and the user makes progress as he completes one level after another. And let's say we have,
const cacheName1 = "level-1";
const resourcesForLevel1 = [
"somepicture.jpg",
"someartwork.png",
"somesound.mp3"
];
const cacheName2 = "level-2";
const resourcesForLevel2 = [
"anotherpicture.jpg",
"anotherartwork.png",
"anothersound.mp3"
];
// etc
In this case how do we wake the service worker up with a function firing in the main thread and thus make the browser get the files in advance as the user reaches certain points in the app?
The nice thing about the Cache Storage API is that the same caches are exposed in both the ServiceWorkerGlobalScope and the Window context. So you can do what you're suggesting without having to send a message to the service worker asking it to cache things for you.
The important thing is to make sure that you're using the same cache names in both contexts.
async function cacheLevel(levelNumber) {
// Make sure this matches the cache name you use in the SW.
const cacheName = `level-${levelNumber};
// Assume there's a levelNumber => URLs mapping function.
const urls = getURLsForLevel(levelNumber);
const cache = await caches.open(cacheName);
await cache.addAll(urls);
}
(Using postMessage() to communicate with the service worker is an option as well, but it's not required for your use case.)