Why does the cache storage in chrome developer tool becomes empty in offline mode

Question

I am using service worker in order to cache and fetch the files.
The files are getting cached in online mode but when I shift to offline mode the cache storage in chrome developer tool is empty. I am not able to make out what is the issue.
Any help is appreciated.

const cacheName = 'myCacheVersion1';
var filesToCache = [
    '/',
    '/service-worker/offline-page.html',
    '/service-worker/sw.js'
]

const offlineUrl = 'https://gmc-test.mytrah.com/service-worker/offline-page.html';

this.addEventListener('install', event => {
    event.waitUntil(
        caches.open(cacheName).then(function(cache){
            console.log(offlineUrl);
            return cache.addAll(filesToCache);
        })
            .then(() => self.skipWaiting())
    );
})

self.addEventListener('activate', function(e) {
    console.log('[ServiceWorker] Activate');
    e.waitUntil(
        caches.keys().then(function(keyList) {
            return Promise.all(keyList.map(function(key) {
                if (key !== cacheName) {
                    console.log('[ServiceWorker] Removing old cache', key);

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

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

this.addEventListener('fetch', event => {
    console.log(event.request);
    event.respondWith(
        fetch(event.request).catch(() => caches.match(event.request))
    )
});`

The above displayed is service worker code. Thanks in advance

Answer 1

It seems to me that the problem is that you're caching the files correctly, but when you're offline and the service worker is trying to fetch the precached assets, you actually request them from the network:

this.addEventListener('fetch', event => {
    console.log(event.request);
    event.respondWith(
        fetch(event.request).catch(() => caches.match(event.request))
    )
});`

You should do something like this:

event.respondWith(
    caches.open(cacheName).then((cache) => {
       return cache.match(evt.request).then((response) => {
           // get from the cache, then make a network request if theres no cache
           return response || fetch(event.request);
       } 
    }
)

Answer 2

Issue

I was facing similar issue while working on the service worker. The moment I marked the network as offline, the cache used to disappear from the Cache Storage. The issue this happened is because I had kept my service worker file inside the javascripts folder. Just like OP has placed inside a service-worker folder. Now the above leads to the scope issue.

---

Fix

Hence, in-order to make your service worker work (no pun intended), you need to move your service worker file to the root dir (emphasis on security while you do so).

---

Documentation

As MDN quotes:

The service worker will only catch requests from clients under the service worker's scope.

The max scope for a service worker is the location of the worker.

You can also set a scope by passing the scope path while registering your Service Worker like

navigator.serviceWorker
  .register('/cache-worker.js', {
    scope: '/some-folder' 
    /* but again, you can never put your service worker inside a dir and 
       try to set a scope which is outside of the service worker dir. 
       It can always be at a lower level than where your service worker file resides..
  })

...