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

[Moxa]

а для чего переписывать урл к картинкам? если картинка уже есть у пользователя, все равно вернется 304. Чаще всего браузер вообще не пойдет в сеть и покажет картинку из кеша, не проверяя есть ли изменения

[edicas]

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

[kolesoffac]

Я думаю это было сделано как пример.

[maxp]

Кратко, но полезно!

[edicas]

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

[abdulgalimov]

Спасибо за статью, полезно :)

Я правильно понял что воркер не будет работать со страницей, которая была запущена впервые на девайсе? Заметил такую штуку, если удалить serviceworker и открыть страницу, воркер не получает событие fetch. Если после этого обновить страницу — событие fetch воркеру прилетает. Это нормальное поведение? Если да, то как сделать так чтобы воркер начал кешировать ресурсы при первом заходе на страницу? возможно ли это?

Спасибо.

[edicas]

между регистрацией/загрузкой воркера, установкой, активацией и началом получения событий от страницы есть небольшие задержки по времени. в 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");
    })
  )
});