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

Question

在我的React 应用程序中，我实现了服务工作人员(通过工作框)。它很好用。每次我更改代码、重新构建、运行服务器、转到浏览器时，我都会看到缓存被成功地更新了。

但是有一件事我不能理解。当我从本地服务器删除某些资产(js或css)并试图在浏览器中执行一些操作(这会调用该资产)时，我将得到一个块错误，该错误表示该文件不可用。

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

我使用的组件是

1. 节点/快递(用于服务器)
2. @loadable/components(用于代码拆分)，结合webpack
3. Google工作盒插件

// 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服务工作人员激活时，它将删除与新的服务工作者部署不再关联的所有过时的预缓存条目。

在这两个密切相关的答案中有更多的背景资料，以及一个介绍：

• 在工作盒中使用skipWaiting和clientsClaim有哪些缺点？
• Workbox: self.skipWaiting()的危险
• 偷懒时注意