服務人員在獲取數據時發生問題

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()); 
}); 

取

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); 
       }); 
     }) 
    ); 
    } 
});