Проблема с сервисными работниками в получении данных

Question

Я использую сценарий ниже, чтобы получить файл bootstrap.min.js от рабочих служб, но в сетевой панели он показывает 1 запрос для bootstrap.min.js и всех других запросов, которые он показывает 2 просьба я приложил скриншот, может кто-нибудь, пожалуйста, помогите мне решить это.

var CACHE_VERSION = 8; 

var CURRENT_CACHES = { 
    prefetch: 'prefetch-cache-v' + CACHE_VERSION, 
    font: 'font-cache-v' + CACHE_VERSION 
}; 

// установка рабочего службы

self.addEventListener('install', function(event) { 
    var now = Date.now(); 

    var urlsToPrefetch = [ 
    '/themes/2.0/fluid/public/responsive/js/bootstrap.min.js' 
    ]; 

    console.log('Handling install event. Resources to prefetch:', urlsToPrefetch); 

    event.waitUntil(
     caches.open(CURRENT_CACHES.prefetch).then(function(cache) { 
      var cachePromises = urlsToPrefetch.map(function(urlToPrefetch) { 
       console.log("comes here23"); 
      var url = new URL(urlToPrefetch, location.href); 
      url.search += (url.search ? '&' : '?') + 'cache-bust=' + now; 

      var request = new Request(url, {mode: 'no-cors'}); 

      return fetch(request).then(function(response) { 
       if (response.status >= 400) { 
       throw new Error('request for ' + urlToPrefetch +' failed with status ' + response.statusText); 
       } 
       // Use the original URL without the cache-busting parameter as the key for cache.put(). 
       return cache.put(urlToPrefetch, response); 
      }).catch(function(error) { 
       console.error('Not caching ' + urlToPrefetch + ' due to ' + error); 
      }); 
      }); 

      return Promise.all(cachePromises).then(function() { 
      console.log('Pre-fetching complete.'); 
      }); 
     }).catch(function(error) { 
     // console.error('Pre-fetching failed:', error); 
     }) 

    ); 
}); 

// выборка запрос от службы работника

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

    event.respondWith(


    caches.match(event.request).then(function(response) { 
     if (response) { 
     console.log("comes here", event.request); 
     return response; 
     } 
     console.log("no cache exists"); 

     return fetch(event.request).then(function(response) { 
     return response; 
     }).catch(function(error) { 

     throw error; 
     }); 

    }) 

); 
}); 

Answer 1

Любой имеющий вышеуказанную проблему можно использовать этот код, который может быть полезным для кого-то

var CACHE_NAME = 'cache-v1'; 

var REQUIRED_FILES = [ 
    '/themes/2.0/fluid/public/responsive/js/bootstrap.min.js' 
]; 

Установка

self.addEventListener('install', function(event) { 
    // Perform install step: loading each required file into cache 
    event.waitUntil(
    caches.open(CACHE_NAME) 
     .then(function(cache) { 
     // Add all offline dependencies to the cache 
     return cache.addAll(REQUIRED_FILES); 
     }) 
     .then(function() { 
     // At this point everything has been cached 
     return self.skipWaiting(); 
     }) 
); 
}); 

Активизировать

self.addEventListener('activate', function(event) { 
    // Calling claim() to force a "controllerchange" event on navigator.serviceWorker 
    event.waitUntil(self.clients.claim()); 
}); 

Fetch

self.addEventListener('fetch', function(event) { 
     const requestURL = new URL(event.request.url); 
    if (/^(\/2.0\/)/.test(requestURL.pathname)) { 
    event.respondWith(
     caches.open(CACHE_NAME) 
     .then(function(cache) { 
      return cache.match(event.request) 
       .then(function(response) { 
        if (response) { 
         return response; 
        } 
        return fetch(event.request); 
       }); 
     }) 
    ); 
    } 
});