Service Worker安装阶段能否与客户端通信？缓存进度同步咨询

问题描述 #

我正在构建一款主打离线使用的PWA，因此会在安装过程中缓存所有资源，代码如下：

self.addEventListener("install", event => {
  self.skipWaiting();
  event.waitUntil(
    caches.open(CACHE_NAME).then(function(cache) {
      return cache.addAll(everything);
    })
  );
});

请问是否有办法在此阶段向客户端传递缓存进度？
看起来install监听器中的event没有可用于postMessage的clientId。
new BroadcastChannel()能否在Service Worker中正常工作？
我不需要精确的字节加载进度，只要文件完成数量即可。能否将cache.addAll替换为如下写法？

for(let file of everything) {
  await cache.add(file);
  /* ...message clients another file is cached */
}

解答 #

1. 安装阶段传递缓存进度是可行的 #

install阶段的确无法直接通过事件获取当前客户端ID，但可以通过跨上下文通信方案向客户端传递进度，核心思路是批量缓存改为逐个处理，每完成一个就同步进度。

2. BroadcastChannel可在Service Worker中正常使用 #

BroadcastChannel是浏览器原生的跨上下文通信API，支持在Service Worker、页面脚本、Shared Worker之间传递消息，只要浏览器支持Service Worker（Chrome、Firefox、Edge等现代浏览器均支持），就能正常使用它来传递缓存进度。

3. 替换cache.addAll为循环await的写法完全可行 #

cache.addAll本质就是批量执行cache.add，换成逐个循环await cache.add(file)的方式，正好可以在每个文件缓存完成后立即发送进度更新。结合BroadcastChannel的实现示例如下：

Service Worker代码

self.addEventListener("install", async event => {
  self.skipWaiting();
  const cache = await caches.open(CACHE_NAME);
  const progressChannel = new BroadcastChannel('pwa-cache-progress');
  let completed = 0;
  const total = everything.length;

  event.waitUntil(
    (async () => {
      for (const file of everything) {
        await cache.add(file);
        completed++;
        progressChannel.postMessage({ completed, total });
      }
      progressChannel.close();
    })()
  );
});

客户端页面代码

const progressChannel = new BroadcastChannel('pwa-cache-progress');
progressChannel.addEventListener('message', (e) => {
  const { completed, total } = e.data;
  // 这里可以直接更新UI，比如显示"已缓存 ${completed}/${total} 个文件"
  console.log(`缓存进度：${completed}/${total}`);
});

额外注意 #

• 若用户在缓存过程中关闭页面，进度消息会丢失，但Service Worker仍会在后台完成缓存，用户重新打开页面时可直接使用离线资源；
• 客户端需尽早监听BroadcastChannel，避免错过初始的进度消息。

内容的提问来源于stack exchange，提问作者nicholas