0

我正在使用 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!

所以我认为触发此通知的正确时刻是 after .addAll()，所以我认为它目前在哪里吐出“文件已被缓存！”？在 上执行此操作会很方便register()，但第三条和最后一条日志消息之间似乎存在延迟。如果是这样，因为我们在 ServiceWorker 内部，postMessage()向客户端发送此信息是否是最好的方式？

谢谢！

4

2 回答 2

5

当您注册一个 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。

于 2015-05-31T22:09:41.760 回答
0

“register()”函数在 service worker 被下载和安装后完成，所以如果你的安装过程在文件没有被缓存的情况下中止，那么你可以在“register()”成功完成后发出通知。但是，在“addAll()”之后发出通知可能是最有意义的（特别是如果您要在 ServiceWorker 安装之后而不是在安装过程中重新排序代码以执行缓存）。“addAll()”函数需要一些时间才能完成，因为它将缓存的内容异步写入磁盘。

于 2015-05-31T21:52:37.110 回答