0

My service-worker.js file won't update automatically when I edit the file then reload the page. however when I debugging on localhost it's work perfectly fine (the service worker update automatically when reload the page just once).

Here is my code service-worker.js

self.addEventListener('install', function(event) {
console.log('[Service Worker] Menginstall Service Worker ...', event);
event.waitUntil(
    caches.open(CACHE_STATIC_NAME)
    .then(function (cache) {
        console.log('[Service Worker] Precaching App Shell');
        cache.addAll(CACHE_STATIC_FILES);
    })
);
    return self.skipWaiting(); 
});

self.addEventListener('activate', function(event) {
console.log('[Service Worker] Mengaktifkan Service Worker ...', event);
event.waitUntil(
    caches.keys()
    .then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
            if(key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC) {
                console.log('[Service Worker] Removing old cache', key);
                return caches.delete(key);
            }
        }));
    })
);
    return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
event.respondWith(
    caches.match(event.request)
    .then(function (response) { 
        if (response) {
            return response; //mencari di cache utk ditampilkan
        } else {
            return fetch(event.request) 
            .then(function (res) {
                return caches.open(CACHE_DYNAMIC) 
                .then(function (cache) {
                    cache.put(event.request.url, res.clone());
                    return res; 
                });
            })
            .catch(function (err) {
                return caches.open(CACHE_STATIC_NAME)
                .then(function (cache) {
                    return cache.match('offline.html');
                });
            });
        }
    })
);
});

And this is the script when I use toast to notify user when update available in the page(something change in the service-worker.js)

function refreshPage() {
   var refreshToast = document.querySelector('#snackbar-refresh');
   var handler = function() {
   window.location.reload();
};
var data = {
    message: 'New Update Available',
    actionHandler: handler,
    actionText: 'Reload',
    timeout: 50000
};
  refreshToast.MaterialSnackbar.showSnackbar(data);
}

var refreshing;
navigator.serviceWorker.addEventListener('controllerchange',
function() {
  if (refreshing) return;
  refreshing = true;
  refreshPage();
}
);
Andi Ahmad Fauzy
  • 21
  • 2
  • It's a background process. It's not expected to change frequently. Browsers will cache it for 24 hours before trying to update it. See: https://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours?noredirect=1&lq=1 – Brahma Dev Mar 25 '18 at 19:46
  • Thank you for reply my question. But, I want to update automatically when I change a little bit for example in the css file. What if my user can't see the updated version on my web app ? – Andi Ahmad Fauzy Mar 25 '18 at 19:50
  • You cannot do that with service worker. You're using the wrong tool if you want your app to change so often. If the browser start updating background workers on page refresh, the web would become unusable. – Brahma Dev Mar 25 '18 at 19:54
  • @AndiAhmadFauzy As the browser will cache the service worker js I found the best way to handle this is disable all caching for the service worker, depends what setup you are running but ultimately you want cache control to be no-cache for the service worker then each time you deploy a new version you'll immediately pick up the changes. – Simon Mar 28 '18 at 09:38

0 Answers0