Search code examples
javascriptweb-workerservice-worker

Service workers issue in fetching the data

I am using the below script to get the bootstrap.min.js file from the service workers but in network pannel it shows 1 request for bootstrap.min.js and all other requests it shows 2 request i have attached the screenshot, can somebody please help me to resolve this.

var CACHE_VERSION = 8;

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

//installing the service worker

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

    );
});

//fetching request from service worker

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

    })

  );
});

Network

Solution

  • Anyone having the above issue can use this code which may be helpful for somebody

    var CACHE_NAME = 'cache-v1';

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

    Install 

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

    Activate

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