Service Worker получить из кэша затем обновить кэш

Question

Я использую следующую логику в моем работнике службы (в моих собственных словах):

Если кэш существует, то использовать его, но и обновлять кэш из сети для позже

event.respondWith(// on `fetch` 
    caches.open(CACHE) 
     .then(function(cache) { 
      return cache.match(request); 
     }) 
     .then(function(matching) { 
      if (matching) { 
       requestAndUpdateCache(event); 
       return matching; 
      } 
      ... 

В дополнение к ответам с кэшированного ответа, я также запустить эту функцию, называемую requestAndUpdateCache.

function requestAndUpdateCache(event){ 
    var url = event.request.url + '?t=' + new Date().getTime(); 
    fetch(url) 
     .then(function(response){ 
      if (response && response.status === 200){ 
       caches.open(CACHE) 
        .then(function(cache){ 
         cache.put(event.request, response.clone()); 
        }); 
      } 
     }, function(error){ 
      console.log(error); 
     }); 
} 

Вопросы: Имеет ли эта функция и ее размещение имеет смысл выполнить логику, описанную выше?

Answer 1

То, что вы описываете, является устаревшей стратегией.

Каноническое место для поиска реализаций различных стратегий кэширования сервисных работников - это The Offline Cookbook Jake Archibald. Там в section, который охватывает несвежий-While-перепроверить, включая следующий код:

self.addEventListener('fetch', function(event) { 
    event.respondWith(
    caches.open('mysite-dynamic').then(function(cache) { 
     return cache.match(event.request).then(function(response) { 
     var fetchPromise = fetch(event.request).then(function(networkResponse) { 
      cache.put(event.request, networkResponse.clone()); 
      return networkResponse; 
     }) 
     return response || fetchPromise; 
     }) 
    }) 
); 
});