Javascript 为什么'；t Workbox是否将缓存用于脱机使用？

我正在使用

我想缓存

https://cdn.jsdelivr.net

因此我将其添加到

service worker.js

：

workbox.routing.registerRoute(new RegExp('https://cdn.jsdelivr.net/.*'), new workbox.strategies.CacheFirst({}), 'GET');

这是我第一次打开应用程序，我可以看到我的应用程序被发送到

https://cdn.jsdelivr.net/npm/@计量吸入器/font@4.x/fonts/materialdesignicons webfont.woff2？v=4.9.95

第二次点击refresh时，我可以看到它从网络中的服务工作者那里检索

但当我在离线模式下点击刷新时，我得到了404

为什么?？如何以正确的方式添加到缓存

我有工作，但不工作

我的完整代码：

console.log('in pwa');

workbox.setConfig({
  debug: true,
});

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});


// The precaching code provided by Workbox. You don't need to change this part.
self.__precacheManifest = [].concat(self.__precacheManifest || []);

console.log({ __precacheManifest: self.__precacheManifest });
// workbox.precaching.suppressWarnings()
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});


workbox.routing.registerRoute(
  new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
  new workbox.strategies.CacheFirst({
    cacheName: 'google-fonts',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 30,
      }),
      new workbox.cacheableResponse.Plugin({
        statuses: [0, 200]
      }),
    ],
  }),
);


workbox.routing.registerRoute(
  new RegExp('https://cdn.jsdelivr.net/(.*)'),
  new workbox.strategies.CacheFirst({
    cacheName: 'jsdelivr-fonts',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 30,
      }),
      new workbox.cacheableResponse.Plugin({
        statuses: [0, 200]
      }),
    ],
  }),
);
// https://cdn.jsdelivr.net
workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL('/index.html'));

无缓存部分（用于google字体和JSDeliver字体）创建：

更新

当我完全删除服务人员并打开应用程序时，仍然没有缓存部分。在我点击刷新后-我有

---

安装服务人员时如何执行此操作？而不激活？

哪个请求导致404？对HTML或web字体的请求？404表示网络请求已发出，但服务器以404错误代码响应。这就是你离线时看到的吗？