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()，所以它当前吐出“文件已被缓存！”的位置是否正确？在 上这样做会很方便register()，但第三条和最后一条日志消息之间似乎存在延迟。如果是这样，因为我们在 ServiceWorker 内部，postMessage()向客户端发送信息是最好的方式吗？

谢谢！

Answer 1

当您注册一个软件时，一旦软件解析并开始安装，您将获得一个注册。您可以使用 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。