Service Worker: как кэшировать изображения без расширений с помощью Workbox

Я новичок в сервис-воркере на своей странице. У меня есть изображения без расширений [*.jpg, *.png и т. д.], например "www.domain.com/api/media/a2b93f21-1acf-4e5e-9b19-6d7c68aaadc2", которые я получаю из API.

Следующий код работает нормально, но не для этого типа изображений

workbox.routing.registerRoute(
    // Cache image files.
    /\.(?:png|jpg|jpeg|svg|gif)$/,
    // Use the cache if it's available.
    new workbox.strategies.CacheFirst({
        // Use a custom cache name.
        cacheName: 'image-cache',
        plugins: [
            new workbox.expiration.Plugin({
                // Cache only 20 images.
                maxEntries: 20,
                // Cache for a maximum of a week.
                maxAgeSeconds: 7 * 24 * 60 * 60,
            })
        ],
    })
);

Есть предложения?


javascript service-worker workbox image-caching
person Maher    schedule 17.04.2019    source источник
comment
Не могли бы вы настроить правило маршрутизации, чтобы оно применялось к чему-либо в каталоге /api/media/? Вы служите что-нибудь кроме изображений из этого?   -  person zero298    schedule 17.04.2019
comment
на самом деле есть файловый менеджер для загрузки изображений, а также получения изображений путем вызова media из API, впереди мы просто получаем Guid в качестве имени файла.   -  person Maher    schedule 17.04.2019
comment
Одним из способов решения этой проблемы может быть проверка заголовков запрошенного файла. Если заголовки сообщают ПО, что запрошенный объект является файлом изображения, кэшируйте его.   -  person pate    schedule 17.04.2019

Ответы (1)


arrow_upward
3
arrow_downward

с рабочим ящиком из руководства.

Вы можете использовать тип перечисления RequestDestination для пункта назначения запрос на определение стратегии. Например, когда целью являются данные

:

workbox.routing.registerRoute(
  // Custom `matchCallback` function
  ({event}) => event.request.destination === 'image',
  new workbox.strategies.CacheFirst({
    cacheName: 'image',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 20,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
      }),
    ],
  })
);

в простом ванильном сервис-воркере вы можете проверить запрос принять заголовок< /а>

if (request.headers.get('Accept').indexOf('image') !== -1) { 
    ... stash in cache ...
}
person denov    schedule 22.04.2019
comment
Спасибо @denov за ваше время, чтобы ответить, я проверю это и не забуду оценить ваш ответ. - person Maher; 25.04.2019
comment
@denov Здравствуйте, не могли бы вы проверить этот вопрос? stackoverflow.com/questions/64117929/ - person Nevin Madhukar K; 29.09.2020