服务工作者 - 渐进式 Web 应用程序的渐进式缓存 - 如何逐步加载文件组

Question

这里是一个只缓存应用基本启动文件的 service worker，

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);
    })
  );
});

到目前为止一切顺利。 现在假设这个 PWA 是一款游戏，用户在完成一个又一个关卡时会取得进步。假设我们有，

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

在这种情况下，我们如何通过在主线程中触发的函数唤醒服务工作者，从而使浏览器在用户到达应用程序中的某些点时提前获取文件？

Answer 1

缓存存储 API 的好处是相同的缓存在 ServiceWorkerGlobalScope 和 Window 上下文中都公开。因此，您可以按照您的建议进行操作，而无需向 Service Worker 发送消息，要求它为您缓存内容。

重要的是确保您在两个上下文中使用相同的缓存名称。

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);
}

（使用postMessage() 与服务工作者通信也是一种选择，但您的用例不需要。）