Предварительно кэшированный контент не загружается из кеша

Question

В моем приложении React SSR я реализовал сервис-воркер (через Workbox). Работает нормально. Каждый раз, когда я меняю какой-то фрагмент кода, заново перестраиваю, запускаю сервер, перехожу в браузер, я вижу, что мой кеш обновлен успешно.

Но одного я не могу понять . Когда я удаляю какой-то актив (js или css) со своего локального сервера и пытаюсь выполнить какое-либо действие в браузере (который вызывает этот актив), я получаю ошибку фрагмента , в которой говорится, что файл недоступен.

Главный вопрос заключается в том, что если этот актив уже находится в кеш-хранилище, его не следует загружать из этого кеша, или я что-то пропустил?

Компоненты, которые я использовал,

1. Узел / экспресс (для сервера)
2. @loadable / components(для разделения кода) в сочетании с webpack
3. Плагин Google Workbox

      // 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

Это связано с тем, что вы используете skipWaiting()внутри вашего сервис-воркера. Когда waiting Service worker активируется, он удалит все устаревшие предварительно кэшированные записи, которые больше не связаны с новым развертыванием Service worker.

В этих двух тесно связанных ответах, а также в презентации содержится дополнительная справочная информация:

• Каковы недостатки использования skipWaiting и clientsClaim с Workbox?
• Workbox: опасность self.skipWaiting()
• Обратите внимание при ленивой загрузке