Сервисный рабочий, двойное кэширование?

Question

У меня проблемы с моим работником службы. Я реализовал его с помощью технологии Cache then Network, где контент сначала извлекается из кеша, и сетевая выборка всегда выполняется и результат кэшируется с успехом. (Вдохновленный этим решением, CSS-Tricks)

Когда я вношу изменения в свое веб-приложение и обновляю обновление, я, конечно же, впервые получаю старый контент. Но при последующих обновлениях контент чередуется между старым и новым. Я могу получить новое или старое содержимое пять раз подряд, или он может отличаться по каждому запросу.

Я уже давно отлаживаю Рабочего Работника и не мудрее. Кто-нибудь имеет представление о том, что случилось с реализацией?

EDIT:

var version = 'v1::2'; 

self.addEventListener("install", function (event) { 
    event.waitUntil(
     caches 
     .open(version + 'fundamentals') 
     .then(function (cache) { 
      return cache.addAll([ 
       "/" 
      ]); 
     }) 
    ); 
}); 

self.addEventListener("fetch", function (event) { 

    if (event.request.method !== 'GET') { 
     return; 
    } 
    event.respondWith(
     caches 
     .match(event.request) 
     .then(function (cached) { 
      var networked = fetch(event.request) 
       .then(fetchedFromNetwork, unableToResolve) 
       .catch(unableToResolve); 

      return cached || networked; 

      function fetchedFromNetwork(response) { 
       var cacheCopy = response.clone(); 

       caches 
        .open(version + 'pages') 
        .then(function add(cache) { 
         cache.put(event.request, cacheCopy); 
        }); 

       return response; 
      } 

      function unableToResolve() { 

       return new Response('<h1>Service Unavailable</h1>', { 
        status: 503, 
        statusText: 'Service Unavailable', 
        headers: new Headers({ 
         'Content-Type': 'text/html' 
        }) 
       }); 
      } 
     }) 
    ); 
}); 

self.addEventListener("activate", function (event) { 

    event.waitUntil(
     caches 
     .keys() 
     .then(function (keys) { 
      return Promise.all(
       keys 
       .filter(function (key) { 
        return !key.startsWith(version); 
       }) 
       .map(function (key) { 
        return caches.delete(key); 
       }) 
      ); 
     }) 
    ); 
}); 

Answer 1

Я не вижу, как вы устанавливаете версию, но я полагаю, несколько кэшей все еще существуют (я вижу, что вы пытаетесь удалить предыдущие кэши, но все же). caches.match() is a convenience method и заказ не гарантируется (по крайней мере, Chrome, похоже, запрашивает старейший). В Chrome Developer Tools отображаются существующие кэши (приложение/кэш/хранилище кэш-памяти) и их содержимое. Если вы хотите запросить определенный кэш, вам необходимо сделать следующее:

caches.open(currentCacheName).then(function(cache) {...} 

как in the example in the Cache documentation.