Service Worker not getting updated automatically in Progressive Web Application

Question

When I change some code in service worker,I expect to update previous service worker in the browsers.I have read that any changes in service-worker.js automatically refreshes it in the browser This is my service worker code:

var dataCacheName = 'demo-v5';

var filesToCache = [
  '/',
  '/Home/Index',
  '/Home/AboutUs'  
];
self.addEventListener('install', function (e) {
    console.log('[Service Worker] Install');
    e.waitUntil(
      caches.open(dataCacheName).then(function (cache) {
          console.log('[Service Worker] Caching app shell');
          return cache.addAll(filesToCache);
      })
    );
});
self.addEventListener('activate', function(e) {
    console.log('[ServiceWorker] Activated');
    caches.keys()
    e.waitUntil(

        // Get all the cache keys (cacheName)
        caches.keys().then(function(cacheNames) {
            return Promise.all(cacheNames.map(function(thisCacheName) {

                // If a cached item is saved under a previous cacheName
                if (thisCacheName !== dataCacheName) {

                    // Delete that cached file
                    console.log('[ServiceWorker] Removing Cached Files from Cache - ', thisCacheName);
                    return caches.delete(thisCacheName);
                }
                else
                {
                    console.log('Else- ', thisCacheName);
                }
            }));
        })
    ); // end e.waitUntil

  //  return self.clients.claim();
});

self.addEventListener('fetch', function (e) {
    console.log('[Service Worker] Fetch', e.request.url);
    var dataUrl = 'https://query.yahooapis.com/v1/public/yql';
    if (e.request.url.indexOf(dataUrl) > -1) {
      e.respondWith(
          caches.open(dataCacheName).then(function (cache) {
              return fetch(e.request).then(function (response) {
                  cache.put(e.request.url, response.clone());
                  return response;
              });
          })
        );
    } else {

        e.respondWith(
          caches.match(e.request).then(function (response) {
              return response || fetch(e.request);
          })
        );
    }
});

Shashank Sood · Accepted Answer · 2016-09-08 12:58:38Z

3

Thanks for your reply. The Actual problem was with filesToCache.The root directory i.e "/"

var filesToCache = [
//  '/',
'/Home/Index',
'/Home/AboutUs'  
 ];

should be commented here. My service-worker class was also getting cached and every time it was picking it from the cache after refresh also.

answered Sep 8, 2016 at 12:58

Shashank Sood

4905 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Matt Gaunt Over a year ago

The comment regarding cached service worker is simply not true, but it's super confusing. IF you load the service worker URL in your browser, the service worker will have a fetch event for the service worker itself, and you can cache it in that BUT the browser will NEVER use the cache before checking for updates.

Shashank Sood Over a year ago

It was using it from cache. I was able to see it in the network tab from the chrome developer's tools

Matt Gaunt Over a year ago

Browsers will NEVER use a service worker from the cache. I have discussed this with Chrome engineers and spec authors..

Shashank Sood Over a year ago

okay I can show an example. I'm using it with .NET application.

collimarco Over a year ago

@GauntFace Maybe my issue lies in the fact that there's no Cache-Control header in the response: what is the default in that case? Probably Chrome caches the SW. I should try with an explicit Cache-Control: no-cache.

|

AadityaTaparia · Accepted Answer · 2016-09-06 07:07:49Z

The changes in service worker will reflect in second refresh of your page. If It is not updating even on second refresh than look for service worker errors in Chrome Developer Console (I hope you already use it). It will be under

Applications -> Service Worker

in chrome Developer tools (Latest stable Chrome version).

Open Chrome Developer tools by Clicking Ctrl + Shift + I or Right click -> Inspect Element.

NOTE: If you want service worker to update on first refresh then change your install event to -

self.addEventListener('install', function (e) {
    console.log('[Service Worker] Install');
    e.waitUntil(
      caches.open(dataCacheName).then(function (cache) {
          console.log('[Service Worker] Caching app shell');
          return cache.addAll(filesToCache);
      }).then(function(e){
        return self.skipWaiting();
      })
    );
});

Collectives™ on Stack Overflow

Service Worker not getting updated automatically in Progressive Web Application

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related