0

我是 Java 脚本和 PWA 的新手。

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

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

Uncaught (in promise) ReferenceError: alert is not defined

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

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

  3. 以及告诉您的实际缓存容量是“this”，加载内容后剩下的是“this”？

4

1 回答 1

-1

您需要在 'activate' 事件（缓存完成后发生）上将 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() 将消息广播到服务工作者控制下的所有内容，这可能是您不想要的。

于 2019-05-23T19:40:55.753 回答