Javascript 服务工作者缓存进度

我对java脚本和PWA都是新手

我正在尝试使用缓存API将所有内容

images/css/audio/video/.html

加载到缓存中，我成功地使用了缓存API和其他资源

我现在的问题是：
内容很快加载到缓存中，SW（服务工作者）应该会告知所有内容都已加载。我试图循环通过我想要缓存的静态内容，并尝试使用alert，但它说

未捕获（承诺中）引用错误：未定义警报

SW如何告诉主页（比如index.html）内容已被缓存，而无需单击任何按钮或交互？

还有，是否有可能显示将内容加载到缓存中的进度条

并告诉您的实际缓存容量是“this”，加载后剩下的内容是“this”

---

您需要将client.postMessage（）添加到“activate”事件（在缓存完成后发生）上的服务工作者，并将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（）将消息广播给服务人员控制下的所有人，这可能是您不想要的。

嘿，您看过

addAll

函数了吗？在这之后，你的缓存应该被启动，理论上你应该能够告诉增量，不确定精确的加载状态，怀疑它，因为它是一个单一的承诺。如果您真的想要一个进度条，请考虑使用“代码”>“添加< /代码>”，而不是<代码> Addie<代码>。然后，您可以在资源上迭代，但这将涉及大量异步操作handling@mchl18非常感谢您的时间和努力！我知道addAll和add方法，它们将内容添加到缓存中。我还知道client.postMessage，它将消息作为回复发送到控制台。我的问题是，服务人员如何告知/告知浏览器我已完成缓存，并且内容现在可以脱机使用？换句话说，服务人员应该向浏览器发送消息，如警报或弹出窗口，缓存完成，内容可供脱机浏览！如果有人能帮忙的话，请提前多谢。