如何向 DOM 报告安装进度？

Question

在 service worker 中，在 "install" 处理程序中，报告 DOM 有多少文件已缓存以及有多少仍在下载的正确方法是什么？

此问题仅在有多个 MB 文件要缓存或连接速度慢时才相关。

Answer 1

有两种方法可以直接将消息从服务工作者传递到客户端页面：使用 postMessage() and using the Broadcast Channel API。

广播频道 API 更容易用于此目的，但它在 Safari 或 Edge 中 not currently supported。

无论哪种情况，都由您决定如何格式化您的消息，并包括来自服务工作者的相关状态信息，客户端需要这些信息才能向用户显示消息。

下面是 postMessage() 方法如何运作的粗略示例：

// In your service worker:
self.addEventListener('install', async event => {
  event.waitUntil((async () => {
    const allUrls = [
      '/url1',
      '/url2',
      // etc.
    ];

    const alreadyCached = [];

    const clients = await self.clients.matchAll({
      includeUncontrolled: true,
    });

    const cache = await caches.open('my-cache-name');
    for (const url of allUrls) {
      await cache.add(url);
      alreadyCached.push(url);
      for (const client of clients) {
        client.postMessage({
          // Put whatever info you want here.
          alreadyCached,
          allUrls,
        });
      }
    }
  })());
});

// In your client pages:
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.addEventListener('message', event => {
    // event.data will contain {alreadyCached, allUrls}.
  });
}

如何向 DOM 报告安装进度？

How to report install progress back to the DOM?

javascript

installation

postmessage

service-worker