reactjs - 预缓存的内容不会从缓存中加载

Question

在我的React SSR应用程序中，我实现了服务工作者（通过 Workbox）。它工作正常。每次当我更改一些代码、再次重建、运行服务器、访问浏览器时，我都会看到我的缓存已成功更新。

但有一件事我无法理解。当我从本地服务器中删除某些资产（js 或 css）并尝试在浏览器中执行某些操作（调用该资产）时，我收到一个块错误，表示该文件不可用。

主要问题是，如果该资产已经在缓存存储中，它不应该从该缓存中加载，还是我错过了什么？

我使用的组件是

节点/快递（用于服务器）
@loadable/components（用于代码拆分），结合 webpack
谷歌工作箱插件

// 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();
};

score 0 · Accepted Answer

这是由于您使用了skipWaiting()Service Worker 的内部。当waitingService Worker 激活时，它将删除所有不再与新 Service Worker 部署关联的过时预缓存条目。

这两个密切相关的答案以及演示文稿中有更多背景信息：

reactjs - 预缓存的内容不会从缓存中加载

1 回答 1

Related

Reference