Question

我是Java脚本和PWA的新手。

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

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

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

SW如何告诉主页（例如index.html）已缓存内容，而没有单击任何按钮或进行任何交互？
并且进度条是否有可能显示将内容加载到缓存的进度？
，同时告诉您实际的缓存容量为“ this”，而加载后的内容为“ this” ？

Answer 1

您需要在“激活”事件（在缓存完成后发生）上将client.postMessage（）添加到服务工作者，并将navigator.serviceWorker.addEventListener（'message'）Fn添加到内容页面索引。 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（）将消息广播到服务工作者控制下的所有内容，而这可能是您不想要的。

服务人员缓存进度

1 个答案: