PWA not working correctly offline

See more:

Javascript

Hi, I have a PWA application using MVC architecture. Everything is working fine except when I go offline to test out one of the main features of PWA, I cannot load the content of my page. To be exact, it just load the UI(empty shell design) without any data/record in it. I checked my service worker and everything seems good.
Now, the offline failing here is quite tricky. I did a quick test by tick checked the "Offline" checkbox in Network tab in Chrome Dev Tools and reload my page and it loaded perfectly. But when I turn off my wifi connection/unplugged my network cable, the page only loads the empty UI without the data.
Upon inspection further on the Network tab to investigate on the network traffic, turns out data is failed to be fetched from service worker(there was no status 200). But things that is weird is that when I go to Application tab -> Cache Storage, the data is indeed cached.
Please any clues/help would be very much appreciated. Below are my codes for service worker:

var cacheName = 'WebAppPWA-v1';
var filesToCache = [
    '/'   
    , '/images/icons/privilegeProgram.png'
    , '/Home/Index'    
    , '/MemberPrivilege/MemPrivilege'
    , '/MemberPrivilege/MemPrivilegeInfo'
    , '/MemberPrivilege/MemPrivilegeInfo?Category=All Categories'
    , '/MemberPrivilege/MemPrivilegeInfo?Category=Food & Beverages'
    , '/MemberPrivilege/MemPrivilegeInfo?Category=Entertainment / Leisure'
    , '/MemberPrivilege/MemPrivilegeInfo?Category=Health & Fitness'
    , '/MemberPrivilege/MemPrivilegeInfo?Category=Miscellaneous'    
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName)
        .then(cache => cache.addAll(filesToCache))
        .then(self.skipWaiting())
  );
});


self.addEventListener('activate', event => {
  const currentCaches = [cacheName];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
    );
    console.log('Service Worker Activated.');
});


self.addEventListener('fetch', event => {
    var req = event.request.clone();
    if (event.request.url.startsWith(self.location.origin) && req.clone().method === 'GET') {
        event.respondWith(
            fetch(event.request).catch(function () {
                return caches.match(event.request);
            })
       
    );
    }
    console.log('Service Worker Fetched.');
});

What I have tried:

1. Change the fetch strategy but to no avail.
2. Looked online for any similar article but problem still persist.