javascript - 如何将安装进度报告回 DOM？

Question

在服务工作人员内部，在“安装”处理程序内部，报告 DOM 已缓存了多少文件以及仍在下载多少文件的正确方法是什么？

仅当有多个 MB 文件需要缓存或连接速度较慢时，此问题才有意义。

Answer 1

有两种方法可以直接将消息从 Service Worker 传递到客户端页面:使用 postMessage()并使用 Broadcast Channel API .

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

无论哪种情况，都由您决定如何格式化消息，并包含客户端向用户显示消息所需的来自 Service Worker 的相关状态信息。

以下是 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}.
  });
}