代码之家 › 专栏 › 技术社区 › Walle Cyril

如何向dom报告安装进度?

postmessage service-worker installation javascript

0

Walle Cyril · 技术社区 · 7 年前

在服务工作者内部,在“install”处理程序内部,报告dom有多少文件已被缓存,还有多少文件仍在下载的正确方法是什么?

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

1 回复 | 直到 7 年前

1

2

Jeff Posnick 7 年前

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

广播频道api在这方面比较容易使用,但是 not currently supported 在狩猎或边缘。

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

下面是一个粗略的例子 邮件() 方法可能有效:

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