Рабочая маршрутизация для изображений в подпапках - PullRequest
Новая
       4

Рабочая маршрутизация для изображений в подпапках

0 голосов
/ 01 апреля 2020

Я использую рабочую панель для управления кэшированием своих активов, что прекрасно работает.

У меня 1 или 2 проблемы с регулярными выражениями при кэшировании моих изображений:

Я пытаюсь кэшировать все изображения в подпапке папок и значков изображений (изображение структуры папок ниже)

Я попробовал следующее, чтобы попытаться кэшировать изображения: 

workbox.routing.registerRoute(
  /images\/.(?:png|gif|jpg|jpeg|svg|ico|webp)$/,  //<-- Regexp
  workbox.strategies.cacheFirst({
   cacheName: 'images',
   plugins: [
    new workbox.expiration.Plugin({
      maxEntries: 100,
      maxAgeSeconds: 60 * 60 * 24 * 365
    }),
  ],
 }),
);

//I also tried a regexp on the entire images folder
workbox.routing.registerRoute(
  new RegExp('^/images/'),    //<-- Regexp
  workbox.strategies.cacheFirst({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 100,
        maxAgeSeconds: 60 * 60 * 24 * 365
      }),
    ],
  }),
);

Я включил примеры кода выше чтобы дать представление о том, чего я пытаюсь достичь

Буду признателен за любую помощь!

Структура папки:

enter image description here

1 Ответ

1 голос
/ 04 апреля 2020

Существует несколько различных способов определения маршрутов в Workbox. Хотя вы можете передать RegExp в качестве первого параметра registerRoute(), как вы это делаете, вы можете вместо этого передать matchCallback функцию , которая может проверять входящий запрос и возвращать либо " truey "или false, в зависимости от того, хотите ли вы запускать маршрут.

В документах Workbox есть рецепт для настройки маршрута на основе значения request.destination, которое для подресурсов будет использоваться в качестве изображения на вашей странице, будет 'image'. Вы можете комбинировать это с проверкой url.pathname внутри вашего matchCallback, если вы хотите ограничить свой маршрут так, чтобы он совпадал только с изображениями в определенной подпапке.

Таким образом, все вместе будет выглядеть что-то вроде: 

workbox.routing.registerRoute(
  ({request, url}) => request.destination === 'image' &&
                      url.pathname.startsWith('/images'),
  workbox.strategies.cacheFirst({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 100,
        maxAgeSeconds: 60 * 60 * 24 * 365
      }),
    ],
  })
);
...