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

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

Answer 2

当下载并安装了服务工作者时，“register（）”函数完成，因此，如果文件尚未缓存，安装过程将中止，那么在“register（）”成功完成后可以执行该通知。但是，在“addAll（）”之后执行通知可能最有意义（特别是如果您要重新排序代码以在安装ServiceWorker之后而不是在安装过程中执行缓存）。 “addAll（）”函数需要一些时间才能完成，因为它会将缓存的内容异步写入磁盘。

ServiceWorker：文件何时实际缓存？

2 个答案: