Javascript 服务工作者中的动态缓存名

我想知道如何使用动态缓存名？ 基本上，我希望能够清除特定url的缓存。 所以我想我可以创建一个名为formA，formB等的缓存。。。 填写表单后，我想清除/删除缓存

情况： 我有两个表单，他们共享css、js和serviceworker等。。。但我希望能够使他们离线可用。所以我想把它们保存在缓存中，比如“formA cache”和“formB cache”，缓存相应的表单资产

当它们被填写时，提交它们，并从缓存中清除它们

这是我现在的服务人员，使用Google Workbox

importScripts(
    "https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js"
  );
  
  const { skipWaiting, clientsClaim } = workbox.core;
  const { registerRoute } = workbox.routing;
  const { NetworkFirst } = workbox.strategies;
  
  skipWaiting();
  clientsClaim();
  
  workbox.precaching.precacheAndRoute([
    "/etc.clientlibs/fd/af/runtime/clientlibs/guideRuntime/resources/images/busy-state.gif",
    "/etc.clientlibs/fd/af/runtime/clientlibs/widgets/numericStepper/resources/images/Minus.svg",
    "/etc.clientlibs/fd/af/runtime/clientlibs/widgets/numericStepper/resources/images/Plus.svg",
    "/etc.clientlibs/fd/rte/gui/components/clientlibs/core/resources/List_a.svg",
    "/etc.clientlibs/fd/rte/gui/components/clientlibs/core/resources/List_ordered.svg",
    "/etc/clientlibs/fd/themes/dev-team-theme/assets/Accordion-Add-Default.svg",
    "/etc/clientlibs/fd/themes/dev-team-theme/assets/Accordion-Delete-Default.svg",
    "/etc/clientlibs/fd/themes/dev-team-theme/assets/Chevron-Active.svg",
    "/etc/clientlibs/fd/themes/dev-team-theme/assets/Chevron-Right-Hover.svg",
    "/etc/clientlibs/fd/themes/dev-team-theme/assets/Chevron-Right-White.svg",
    "/etc/clientlibs/fd/themes/dev-team-theme/assets/Minus.svg",
    "/etc/clientlibs/fd/themes/dev-team-theme/assets/Minus_Hover.svg",
    "/etc/clientlibs/fd/themes/dev-team-theme/assets/Plus.svg",
    "/etc/clientlibs/fd/themes/dev-team-theme/assets/Plus_Hover.svg",
    "/etc/clientlibs/fd/themes/dev-team-theme/assets/Save.svg",
    "/etc/clientlibs/fd/themes/dev-team-theme/assets/Submit-Hover.svg",
    "/etc/clientlibs/fd/themes/dev-team-theme/assets/Table-Edit-Default.svg",
  ]);
  
  registerRoute(
    ({ request }) => {
      console.log("    ", request.url);
      return (
        request.destination === "iframe" ||
        request.destination === "document" ||
        request.destination === "image" ||
        request.destination === "script" ||
        request.destination === "style" ||
        request.destination === "font"
      );
    },
    new NetworkFirst({
      cacheName: "abc-forms", // This needs to become formA-cache, formB-cache etc...
    })
  );
  

欢迎任何帮助或想法

谢谢

---

Mario虽然可以为所有URL创建命名缓存，但我不建议这样做。而是编写一个缓存失效例程来清除缓存版本并替换为新版本

只要你知道它的名字缓存，那么你就可以缓存新版本，它将替换旧版本

如果您不知道缓存响应的是哪个命名缓存，那么您将需要在所有命名缓存上循环，以查看是否缓存了响应才能做到这一点。基本上找到名为cache的目标