由于客户端未注册，首次在服务工作器中加载页面时未执行FETCH事件

嗨，我在服务人员中面临着一种有线行为。在清除所有缓存加载后，页面服务工作者将所有内容加载到缓存API。然后我离线并重新加载页面，该页面没有加载。我再次上线并加载页面，然后离线加载页面，这一次页面加载正确。我不知道为什么这种行为与服务人员的等待时间有关，如何解决这个问题。

经过几次调试后，我发现我的FETCH代码在第一次加载页面时不会执行。从第二个页面加载开始，它就会获得点击

我的示例应用程序托管在这里https://ajeeshc.github.io/#/comments

我的服务人员文件位于here

完整演示代码位置here

请帮帮我，我真的处于危急状态。 我几乎没有阅读到注册服务工作者延迟导致此问题的原因如何解决这个问题？

以下是我的服务人员注册码。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('service-worker.js', { scope: './' })
    .then(function (registration) {
      console.log("Service worker registered - from the 24 ", registration)
      registration.addEventListener('updatefound', () => {
        newWorker = registration.installing;
        newWorker.addEventListener('statechange', () => {
          switch (newWorker.state) {
            case 'installed':
              if (navigator.serviceWorker.controller) {

                showUpdateBar();
              }
              break;
          }
        });
      });
    })
    .catch(function (err) {
      console.log("Service Worker Failes to Register", err)
    })

  navigator.serviceWorker.addEventListener('message', function (event) {
    document.getElementById("cache-generic-msg").style.display = "block";
    console.log("Got reply from service worker: " + event.data);
  });

  let refreshing;
  navigator.serviceWorker.addEventListener('controllerchange', function () {
    if (refreshing) return;
    window.location.reload();
    refreshing = true;
  });

}

---

解决方案

经过几次研究后，我发现了我在这里遗漏的东西。 在我的代码第一次加载时，服务工作者没有注册到客户端。它不能调用任何FETCH事件。如果您看到应用程序选项卡，您可以检查客户端是否已注册。如果它注册了，您将在那里有名称，否则它将为空

现在如何在第一次加载时使用

注册客户端

self.clients.Claim()

请找到下面的代码

self.addEventListener('activate', (event) => {
    console.info('Event: Activate');
    event.waitUntil(
        self.clients.claim(),
        caches.keys().then((cacheNames) => {
            return Promise.all(
                cacheNames.map((cache) => {
                    if (cache !== cacheName) {
                        return caches.delete(cache);
                    }
                })
            );
        })
    );
});