Сервисный работник без кеша - PullRequest
Новая
       8

Сервисный работник без кеша

0 голосов
/ 27 августа 2018 
self.addEventListener('fetch', function(e) {
if (e.request.url.startsWith(self.location.origin)) {
    console.log("matched url")
    e.respondWith(
        caches.match(e.request).then(function (response) {
            //return response || fetch(e.request);
            return fetch(e.request);
        })
    );
} else {
    console.log("not matched url")
}
});

Все, что я хочу сделать, - это обслуживать только некоторые моих страниц и ресурсов из кэша, а не все (я полагаю, это помещает кэшированные страницы в кэш времени выполнения).

Этот закомментированный кусок кода: ответ возврата ||fetch (e.request); обслуживает все кэшированные страницы ... сайт действительно динамичный.Вот почему я просто использую return fetch (e.request); сейчас.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 30 августа 2018

Полагаю, этот пример кода действительно может помочь: https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js

Вот также живая демонстрация: https://googlechrome.github.io/samples/service-worker/selective-caching/

Идея, насколько я понимаю, довольно проста:составьте карту ожидаемых URL-адресов, которые должны быть кэшированы, а затем проверьте каждый запрос на URL:

TLDR; 

self.addEventListener('activate', function(event) {
  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
    return CURRENT_CACHES[key];
  });

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (expectedCacheNames.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open(CURRENT_CACHES.font).then(function(cache) {
      return cache.match(event.request).then(function(response) {
        if (response) {
          return response;
        }

        return fetch(event.request.clone()).then(function(response) {
          if (response.status < 400) {
            cache.put(event.request, response.clone());
          }

          return response;
        });
      });
    })
  );
});
...