Как исключить URL-адрес из кэширования во время выполнения workbox?

#progressive-web-apps #workbox

#progressive-web-apps #workbox

Вопрос:

Я использую workbox-build для Gulp в моем проекте django. Все работает правильно, но есть некоторые проблемы с URL-адресами администратора. Как я вижу, /admin / * URL-адреса кэшируются во время выполнения — я вижу их в Chrome DevTools / Application / Cache. Как я могу исключить URL-адреса администратора из кэширования во время выполнения?

gulp.js:

 gulp.task('service-worker', () => {
   return workboxBuild.injectManifest({
         globDirectory: '/var/www/example.com/',
         swSrc:  '/var/www/example.com/core/templates/core/serviceWorker/sw-dev.js',
         swDest: '/var/www/example.com/core/templates/core/serviceWorker/sw.js',
         globPatterns:['**/*.{html,js,css,jpg,png,ttf,otf}'],
         globIgnores: ['admin/**','media/**','core/**','static/admin/**','static/core/scripts/plugins/**']
         }).then(({count, size, warnings}) => {
         });
  

sw.js:

 importScripts("https://storage.googleapis.com/workbox- cdn/releases/3.4.1/workbox-sw.js");
workbox.precaching.precacheAndRoute([]);
workbox.googleAnalytics.initialize();
workbox.routing.registerRoute(
workbox.strategies.cacheFirst({
// Use a custom cache name
cacheName: 'image-cache',
plugins: [
  new workbox.expiration.Plugin({
    // Cache only 20 images
    maxEntries: 30,
    // Cache for a maximum of a week
    maxAgeSeconds: 7 * 24 * 60 * 60,
    })
   ],
  })
);

workbox.routing.registerRoute(
    /.*.(?:ttf|otf)/,
    workbox.strategies.cacheFirst({
    cacheName: 'font-cache',
    })
);

workbox.routing.registerRoute(
  new RegExp('/$'),
  workbox.strategies.staleWhileRevalidate()
);

workbox.routing.registerRoute(
  new RegExp('contacts/$'),
  workbox.strategies.staleWhileRevalidate()
);
workbox.routing.registerRoute(
  new RegExp('pricelist/$'),
  workbox.strategies.staleWhileRevalidate()
);
  

Комментарии:

1. У меня такая же проблема с кэшированием ресурсов администратора WordPress. Изначально я зарегистрировал маршрут специально для networkOnly() (с пользовательским регулярным выражением), но мне сказали, что это не очень хороший способ сделать это. Я надеюсь найти лучшую альтернативу.

Ответ №1:

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

 workbox.routing.registerRoute(
  // Match all navigation requests, except those for URLs whose
  // path starts with '/admin/'
  ({request, url}) => request.mode === 'navigate' amp;amp;
                      !url.pathname.startsWith('/admin/'),
  new workbox.strategies.StaleWhileRevalidate()
);