Блог

Мне было интересно, как я мог бы использовать динамическое имя кэша? В принципе, я хочу иметь возможность очищать кеш для определенного URL. Итак, я подумал, что мог бы создать кеш с именем formA, formbи т.д. … и когда форма будет заполнена, я хочу очистить / удалить этот кеш.

Ситуация: у меня есть 2 формы, которые имеют общий css, js, а также общий serviceworker и т.д… Но я хочу иметь возможность сделать их доступными в автономном режиме. Итак, я хочу сохранить их в кэше, например «formA-cache» и «formbcache», кэшируя соответствующие ресурсы forms.

И когда они будут заполнены, отправьте их и очистите их от кэша.

На данный момент это мой Service worker, использующий 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...
    })
  );
  
  

Любая помощь или идеи приветствуются!

Спасибо

Марио

Хотя вы могли бы создать именованный кэш для всех URL-адресов, я бы не советовал этого. Вместо этого напишите процедуру аннулирования кэша, чтобы очистить кэшированную версию и заменить новой.

Пока вы знаете, в каком именованном кэше оно находится, вы можете просто кэшировать новую версию, и она заменит старую версию.

Если вы не знаете, в каком именованном кэше кэшируется ответ, вам нужно будет перебрать все именованные кэши, чтобы увидеть, кэширован ли ответ для этого. В основном найдите целевой кэш с именем.