Can I preload specific assets using service workers? - service-worker

Question

I'm new to service workers and still unsure how they work.
I'm building an educational game using react, ES6, Typescript. This game will eventually have numerous assets such as animations exported by Adobe Animate, audio files, etc.
I want to preload all the assets for an individual level before the game starts. I've been messing with Workbox, but I'm not sure if it allows to preload specific assets according to what level in the game the user is at. In other words, if an user is on Level 1, I want to preload all assets for Level 1, and eventually, after the game starts, preload all assets for Level 2 so the user doesn't have to wait once Level 1 is completed.
Is this possible with service workers and/or Workbox?

Answer 1

Workbox has support for precaching a set of URL derived at build time. A best practice, for applications that might have many megabytes worth of content, is to only cache the assets that you think the majority of the users will end up using.
It sounds like, in your scenario, it would make sense to precache the shared HTML, JavaScript, and CSS that's common throughout your web app, and then use a different strategy for the level-specific assets.
You can use the Cache Storage API directly (either from within your web app's window context, or inside your service worker) to add URLs to a cache outside of the precaching step.
What I would recommend doing is taking advantage of the Cache Storage API to add items to the cache proactively when certain conditions are met in your web app (like, the user is about to complete level 1), and then use a cache-first (or stale-while-revalidate, if you want to include a check for updates to cached resources) strategy in Workbox along with a route that matches those URLs. If a given asset has already been added to the cache then it will be used right away, and if the asset hasn't been added to the cache (because the user progressed from level 1 to level 2 before the cache.addAll() call could complete), things will still work, but they'll be blocked on the network.
This might look like the following in your web app's window context:
const level2Urls = [
'/assets/level2.png',
// ...
];
const level3Urls = [
'/assets/level3.png',
// ...
];
async function cacheAssetUrls(urls) {
const cache = await caches.open('assets');
await caches.addAll(urls);
}
And then in your service worker:
workbox.routing.registerRoute(
new RegExp('/assets/')
workbox.strategies.cacheFirst({
cacheName: 'assets'
})
);