service worker - 渐进式网络应用程序的渐进式缓存 - 如何逐步加载文件组

Question

这是一个只缓存应用程序基本启动文件的服务工作者，

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() 与 Service Worker 通信也是一种选择，但对于您的用例而言不是必需的。）

service worker - 渐进式网络应用程序的渐进式缓存 - 如何逐步加载文件组

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

javascript

service-worker

progressive-web-apps