Service Worker not caching files when React app is deployed

Question

I'm making a React PWA which works fine on localhost to cache all the listed files but when I deploy the project on Netlify or any other platform it won't cache the files and is not working offline. The cache storage shows empty list which in case of localhost shows all the files I'm caching. The service worker file is being registered in both cases.

The link to my github repo is here: https://github.com/noumanmalik960/quiz-app-pwa

Here is service worker file code:

const CACHE_NAME = "cache-v1"
const urlsToCache = [
  '/',
  '/index.html',
  '/static/js/bundle.js',
  '/static/js/0.chunk.js',
  '/static/js/main.chunk.js',
  '/manifest.json',
  '/static/media/bg.759ecf3a.jpg',
  '/images/logo.png'
]


self.addEventListener('install', function (event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function (cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function (event) {
  if (!navigator.onLine) {

    event.respondWith(
      caches.match(event.request)
        .then(function (response) {
          if (response)
            return response;
          return fetch(event.request);
        })
    )
  }


})

In your filesToCache in service worker , you need to append your netlify deployment url. — Vimal Patel
@VimalPatel I have appended the list with "https://quiz-pwa-knowmi.netlify.app/", that is my netlify deployment link but the problem is still the same. — Nouman Javed

Vimal Patel Vimal Patel · Accepted Answer · 2020-11-15T16:56:20

The reason your cache list is empty as few of the files which you mentioned in your cache list does not exist. Check below screenshot. If any of the files which you have mentioned in your cached List (in your service worker) is missing or browser not able to find that then it will create the cache entry but will not be able to cache any files.

Fix your above mentioned files url and then your service worker will work as expected.

Service Worker not caching files when React app is deployed

1 Answers