CODEWITHSUNDEEP
javascripthtmlservice-worker
Sadegh Sazmand
Sadegh Sazmand

Reputation: 149

reload cashed files to browser serviceWorker in JavaScript

Every time that I edit my PWA App source, Like html or js files, I have to manually delete browser cached files and history in order to load new data that i uploaded. my serviceWorker routine try to cache my main url html only but it seems all files being cached automatically. here is my serviceWorker file:

    var cacheName = 'app-pwa';
    var filesToCache = [
      '/',
      '/index.html'
    ];

    /* Start the service worker and cache all of the app's content */
   self.addEventListener('install', function(e) {
     e.waitUntil(
       caches.open(cacheName).then(function(cache) {
         return cache.addAll(filesToCache);
       })
     );
   });

   /* Serve cached content when offline */
   self.addEventListener('fetch', function(e) {
     e.respondWith(
       caches.match(e.request).then(function(response) {
         return response || fetch(e.request);
       })
     );
    });

So anyone can help me how to refresh cached files in browser? thank you

Upvotes: 1

Views: 183

Answers (1)

Sadegh Sazmand
Sadegh Sazmand

Reputation: 149

well I find the way myself and will share here for anyone who may need it. the way is to define versions in the end of cache file name:

var cacheName = 'app-pwa-v1';

and increase version for any update. and define another service worker to delete previous cached files.

self.addEventListener('activate', (e) => {
  e.waitUntil(caches.keys().then((keyList) => {
    Promise.all(keyList.map((key) => {
      if (key === cacheName) { return; }
      caches.delete(key);
    }))
  })));
});

this will delete old cached files after second app startup.

Upvotes: 0

Related Questions