Precached content does not load from cache

Question

In my React SSR application I have implemented service worker(via Workbox). It's working fine. Every time when I am changing some piece of code, rebuilding again, running the server, going to the browser, I am seeing that my cache was updated succesfully.

But one thing I cant understand. When I am deleting some asset(js or css) from my local server and trying to do some action in the browser(which invokes that asset) I am getting a chunk error, which says that the file is not available.

The main question is if that asset is already is in cache storage it should not be loaded from that cache or I have missed something?

The components I have used is

1. Node/express(for server)
2. @loadable/components(for code splitting), combined with webpack
3. Google workbox plugin

// my sw.js file
import { skipWaiting } from 'workbox-core';
import { precacheAndRoute } from 'workbox-precaching';

declare const self: Window & ServiceWorkerGlobalScope;

precacheAndRoute(self.__WB_MANIFEST);

skipWaiting();

// my workbox setup
const serviceWorkerRegistration = async (): Promise<void> => {
  const { Workbox } = await import('workbox-window');
  const wb = new Workbox('./service-worker.js');

  wb.addEventListener('activated', (event: any) => {
    if (event.isExternal) {
      window.location.reload();
    }
  });

  wb.register();
};

Answer 1

This is due to your usage of skipWaiting() inside of your service worker. When the waiting service worker activates, it will delete all of the outdated precached entries that are no longer associated with the new service worker deployment.

There is more background information in this two closely related answers, as well as a presentation:

• What are the downsides to using skipWaiting and clientsClaim with Workbox?
• Workbox: the danger of self.skipWaiting()
• Paying Attention while Loading Lazily