Подводные камни Service Workers

это была часть задачи. там суть проекта была в том, чтобы упаковать существующее веб-приложение в десктопный апп, способный работать в оффлайне. долгая история, но вкратце — в офисе скачиваются необходимые данные, потом человек едет куда-то и проводит презентацию используя предварительно сохраненные документы/картинки и т.д.

Спасибо за отзыв!

между регистрацией/загрузкой воркера, установкой, активацией и началом получения событий от страницы есть небольшие задержки по времени. в SW все происходит не мгновенно и асинхронно, соответственно если страница загружается впервые это и происходит.
вот тут есть инфографика цикла жизни воркера mdn.mozillademos.org/files/12636/sw-lifecycle.png
слушайте события install и activate в воркере чтобы увидеть когда у Вас в действительности происходит установка.
если Вам важно чтобы все запросы от страницы проходили через фетч воркера, то имеет смысл в обработчике onActivate отправить message подключенным клиентам (странице) и на стороне страницы начинать работу уже когда получили это сообщение.

self.send_message_to_client = function(client, msg){
  return new Promise(function(resolve, reject){
    var msg_chan = new MessageChannel();
    msg_chan.port1.onmessage = function(event){
      if(event.data.error){
        reject(event.data.error);
      } else {
        resolve(event.data);
      }
    };
    client.postMessage("SW Says: '"+msg+"'", [msg_chan.port2]);
  });
};

self.send_message_to_all_clients = function (msg) {
  clients.matchAll().then(clients => {
      clients.forEach(client => {
      self.send_message_to_client(client, msg).then(m => console.log("SW Received Message: " + m));
    });
  });
};

self.addEventListener("activate", function (event) {
  console.info('service worker activated');

  event.waitUntil(
    clients.claim().then(function () {
      // console.info('clients.claim().then here');
      self.send_message_to_all_clients("do it now");
    })
  )
});