CODEWITHSUNDEEP
javascriptprogressive-web-appsservice-worker
TheNightwalker
TheNightwalker

Reputation: 661

service worker - Progressive caching for a progressive web app - How to load groups of files step by step

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?

Upvotes: 0

Views: 123

Answers (1)

Jeff Posnick
Jeff Posnick

Reputation: 56044

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.)

Upvotes: 1

Related Questions