0

I had App Cache working correctly for offline capability for our web app but I was tasked with switching to service workers because several major browsers have threatened that app cache support may be dropped at any time. I was able to get service workers to work fine but the problem comes when an end-user device using the app with app cache does not load the new service worker without having to clear the browser cache manually (in settings).

The service worker version works great for any device that never used the app with the app cache version or had cache manually cleared.

Is there something that I should be doing when setting up the service worker to force a change for the app cache version?

The app is using ASP.NET and the service worker code is in the Global.master which is included in every page.

Global.master
--------------------------------------------------
if ('serviceWorker' in navigator)
{


    navigator.serviceWorker
    .register('/Service_Worker.js')
    .then(function (registration)
    {
        console.log("Service Worker Registered");

    })
    .catch(function (err)
    {
        console.log("Service Worker registration failed");
    });
}
else
{
    console.log('service worker not supported.');

}


Service_Worker.js
--------------------------------------------------

self.addEventListener('install', function (e)
{
    self.skipWaiting();

    e.waitUntil(
        caches.open(cacheName).then(function (cache)
        {
            return cache.addAll(appShellFiles);
        })
    );
});

// Fetching content using Service Worker
self.addEventListener('fetch', function (e)
{
   e.respondWith(
        caches.match(e.request).then(function (r)
        {

            return r || fetch(e.request).then(function (response) 
            {
                return caches.open(cacheName).then(function (cache)
                {

                    cache.put(e.request, response.clone());
                    return response;
                });
            });
        })
    );
});


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

    e.waitUntil(
        caches.keys().then(function (keyList)
        {
            return Promise.all(keyList.map(function (key)
            {
                if (cacheName.indexOf(key) === -1)
                {

                    return caches.delete(key);
                }
            }));
        })
    );
});

Expected Results: devices running application cache should work with service workers after the app is updated

Actual Results: Until the device previously running application cache version has cache cleared it continues running client-side code from the previous version's cache.

James Sumner
  • 138
  • 3
  • 15

1 Answers1

0

most likely the user is still fetching from appCache since that is registered. You need to bypass the cached asset(s) to trigger a trip to your server to get the updated code.

Chris Love
  • 3,740
  • 1
  • 19
  • 16
  • It would be great if you could explain or provide a resource on how to bypass the cached assets. I face the same issue with the old appcache in user's browsers. – RedDree Sep 24 '20 at 12:09
  • 1
    well, when a service worker is registered it should bypass the appCache. Plus browsers are in the process of phasing appCache out. However you most likely have legacy users with the appCache in place. So this may be tough to break. Good question to ponder. I had not even dealt with appCache in a few years as most sites never used it. I think you should just remove the appCache file, at least post says it should work. https://stackoverflow.com/questions/7937736/removing-html5-offline-appcache – Chris Love Sep 26 '20 at 18:38
  • Thanks for the link. The accepted answer is not correct but there are links in the comments and one of them looks promising. I’m going to try it out. – RedDree Sep 27 '20 at 19:47