Кэширование только изображений внутри сервисного работника - PullRequest
Новая
       80

Кэширование только изображений внутри сервисного работника

0 голосов
/ 23 марта 2020

Ниже приведен код для SW, все работает нормально. Ранее я кэшировал все динамические c страницы, но это создавало мне некоторые проблемы. Как и изменения DOM страницы после взаимодействия с пользователем, не отражаются при следующем просмотре страницы. Всегда показывает оригинальный DOM.

ТАК Мне нужен был только один кешированный образ динамически. Я прокомментировал оригинальный код, который кэшировал весь контент. 

self.addEventListener('activate', function(event) {
  console.log('[Service Worker] Activating Service Worker ....', event);
  /*event.waitUntil(
    caches.keys()
      .then(function(keyList) {
        return Promise.all(keyList.map(function(key) {
          if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
            console.log('[Service Worker] Removing old cache.', key);
            return caches.delete(key);
          }
        }));
      })
  );*/
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        } else {
          /*return fetch(event.request)
            .then(function(res) {
              return caches.open(CACHE_DYNAMIC_NAME)
                .then(function(cache) {

                    /!*if ( event.request.url.indexOf( 'maps.google' ) !== -1 ) {
                        return false;
                    }*!/
                    if (!/^https?:$/i.test(new URL(event.request.url).protocol)) {
                        return;
                    }

                    cache.put(event.request.url, res.clone());
                    return res;
                })
            })
            .catch(function(err) {

                console.log('show offline page as cashe and network not available')
                return caches.open(CACHE_STATIC_NAME)
                    .then(function (cache) {
                        return cache.match(OFFLINE_URL);
                    });
            });*/

            return fetch(event.request);
        }
      })
  );
});

1 Ответ

1 голос
/ 13 апреля 2020

Я бы рекомендовал следовать подходу, описанному в этой статье " Стратегии кэширования сервисных работников на основе типов запросов ", и использовать request.destination внутри обработчика fetch, чтобы выяснить, какие запросы выполняются для изображений. 

self.addEventListener('fetch', (event) => {
  if (event.request.destination === 'image') {
    event.respondWith(/* your caching logic here */);
  }

  // If you don't call event.respondWith() for some requests,
  // the normal loading behavior will be used by default.
};

Возможно, что запрос изображения может быть загружен через что-то вроде XMLHttpRequest, в этом случае значение request.destination, вероятно, не будет установлено правильно. Если это так, я бы рекомендовал просто проверить ту часть URL, которая, по вашему мнению, скорее всего будет уникальной, с помощью сравнения строк. 

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.origin.includes('maps.google')) {
    event.respondWith(/* your caching logic here */);
  }

  // If you don't call event.respondWith() for some requests,
  // the normal loading behavior will be used by default.
};
...