how do i cache the large files on the browser to make the loading time faster

Question

Im trying to store model and js files in cache storage using service workers to make the loading time fast but the cache is not being stored and fetched from the cache storage,when I change the version also it is not able to refetch the cache and store them,

self.addEventListener('fetch', function(event) {});
var CACHE_VERSION = 2.2
var CURRENT_CACHES = {
  prefetch: 'prefetch-cache-v' + CACHE_VERSION
};

self.addEventListener('install', function(event) {
  var urlsToPrefetch = [
    '/',
    'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js',
    'https://use.typekit.net/af/dde969/00000000000000007735b995/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3',
    'https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js',
    'https://code.jquery.com/jquery-2.2.4.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js',
    'https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_packed_assets_loader.js',
    'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css',
    'https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js',
    'https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_web.binarypb',
    'https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_packed_assets.data',
    'https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_landmark_lite.tflite',
    'https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_simd_wasm_bin.wasm',
    'https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_simd_wasm_bin.js',
  ];
  self.skipWaiting();
  event.waitUntil(
    caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
      return cache.addAll(urlsToPrefetch);
    })
  );
});

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

  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
    return CURRENT_CACHES[key];
  });

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (expectedCacheNames.indexOf(cacheName) === -1) {
            
           
            return caches.delete(cacheName);
          }
        })
        );
    })
    );
});

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

  if (event.request.headers.get('range')) {
    var pos =
    Number(/^bytes\=(\d+)\-$/g.exec(event.request.headers.get('range'))[1]);

    event.respondWith(
      caches.open(CURRENT_CACHES.prefetch)
      .then(function(cache) {
        return cache.match(event.request.url);
      }).then(function(res) {
        if (!res) {
          return fetch(event.request)
          .then(res => {
            return res.arrayBuffer();
          });
        }
        return res.arrayBuffer();
      }).then(function(ab) {
        return new Response(
          ab.slice(pos),
          {
            status: 206,
            statusText: 'Partial Content',
            headers: [
              ['Content-Range', 'bytes ' + pos + '-' +
                (ab.byteLength - 1) + '/' + ab.byteLength]]
          });
      }));
  } else {
  
    event.respondWith(

    caches.match(event.request).then(function(response) {
      if (response) {
      
        return response;
      }
 
      return fetch(event.request).then(function(response) {
        

        return response;
      }).catch(function(error) {
        throw error;
      });
    })
    );
  }
});

for some reason it works better in linux system, if I do hard refresh it will work sometimes but the files is not fetched from the cache always,even thought the files can be seen in cache storage of the browser

What? where is this code running? What are you trying to achieve? Browsers by default cache almost everything, unless appropriate HTTP Headers are sent with the response, like [these](https://stackoverflow.com/a/4485194/4935162). you can go over the responses in the devtools and see which CDN returns which headers. If you're trying to cache it on the server side - The whole point of CDNs is that they can serve that content faster than your own server. — Yarin_007, Dec 23 '22 at 12:26
The code is running in a service worker, which is registered and activate when an user open the page, — Astro, Dec 24 '22 at 10:53

how do i cache the large files on the browser to make the loading time faster

0 Answers0