ServiceWorker：什么时候真正缓存文件？

Question

我正在使用 ServiceWorker 来缓存一些资产，我想在所有文件都已成功缓存后通知用户，以便他们知道内容可以离线访问。什么时候做这件事合适？

我有几个console.log()对事情的流程有一个想法。这是我注册 ServiceWorker 的时刻：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/serviceWorker.js')
        .then(function(registration) {
            console.log('* ServiceWorker registration successful');
        })
        .catch(function(err) {
            console.log('* ServiceWorker registration failed: ', err);
        });
}

在 ServiceWorker 内部：

self.addEventListener('install', function(event) {
    console.log('* Installing Service Worker...');

    event.waitUntil(
        caches.open(cacheName).then(function(cache) {
            console.log('* Opened cache');
            return cache.addAll(filesToCache).then(function () {
                console.log('* Files have been cached!');
            });
        })
    );
});

并且控制台显示：

* Installing Service Worker...
* Opened cache
* ServiceWorker registration successful
* Files have been cached!

所以我认为触发此通知的正确时间是在 .addAll() 之后，所以它当前在 "Files have been cached!" 处吐出的地方是对的吗？在 register() 上执行此操作会很方便，但第三条和最后一条日志消息之间似乎存在延迟。如果是这样，因为我们在 ServiceWorker 内部，postMessage() 到客户端是否是发送此信息的最佳方式？

谢谢！

Answer 1

"register()" 函数在 service worker 下载并安装完成后完成，因此如果您的安装过程在文件未被缓存的情况下中止，那么您可以在 "register()" 之后进行通知顺利完成。然而，在 "addAll()" 之后进行通知可能是最有意义的（特别是如果您曾经重新排序代码以在 ServiceWorker 安装之后而不是在安装过程中执行缓存）。 "addAll()" 函数需要一些时间才能完成，因为它会将缓存的内容异步写入磁盘。

Answer 2

当您注册软件时，您将在软件解析并开始安装后获得注册。您可以使用 statechange 事件跟踪其进度：

navigator.serviceWorker.register('/sw.js').then(function(reg) {
  if (!reg.installing) return;
  console.log("There is a ServiceWorker installing");

  var worker = reg.installing;
  worker.addEventListener('statechange', function() {
    if (worker.state == 'redundant') {
      console.log('Install failed');
    }
    if (worker.state == 'installed') {
      console.log('Install successful!');
    }
  });
});

无论您在安装步骤中做什么，这都可以让您跟踪安装。如果你想要更细粒度的通知，你可以使用postMessage。

ServiceWorker：什么时候真正缓存文件？

ServiceWorker: when are the files actually cached?

caching

service-worker