服务工作者缓存进度

Question

我是Java脚本和PWA的新手。

我正在尝试使用缓存API将我所有的内容images/css/audio/video/.html加载到缓存中，这是我使用https://developers.google.com和其他资源成功完成的。

我的问题是：
很快将内容加载到缓存中，SW（服务工作者）应告知所有内容都已加载。 我试图遍历要缓存的静态内容，并尝试使用警报，但是它说

未捕获（承诺）ReferenceError：未定义警报

1. SW如何在不单击任何按钮或进行任何交互的情况下告诉主页（例如index.html）已缓存内容？

2. 进度条是否有可能显示将内容加载到缓存的进度？

3. 并告诉您实际的缓存容量为“ this”，而加载后的内容为“ this” ？

Answer 1

您需要在“激活”事件（在缓存完成后发生）上将client.postMessage（）添加到服务工作者，并将navigator.serviceWorker.addEventListener（'message'）Fn添加到内容页面index.html或其他内容。

这是我使用的代码：

// activate with notification TO DOM (!)
global.addEventListener('activate', event => {
  event.waitUntil(async function() {
    await global.clients.claim();
    delay(5000).then(() => {
      data = 'activated';
      console.log('activate msg => dom: ' + data);
      global.clients.matchAll().then(all => all.map(client => client.postMessage(data)));
    });
  }());
});

并在内容页面脚本上：

navigator.serviceWorker.addEventListener('message', function(event) {
  console.log('sw message: ' + event.data);
  if ( event.data === 'activated' ) {
    somefunctions();
  }
});

注意global.clients.matchAll（）将消息广播到服务工作者控制下的所有对象，而您可能不需要。