Использование sw-precache, настроенного с помощью runtimeCaching, не загружает sw-toolbox

Question

Согласно документации sw-precache https://github.com/GoogleChrome/sw-precache, включая настройку кэширования во время выполнения для sw-precache, сама должна позаботиться о включении sw-toolbox для кэширования динамического содержимого во время выполнения. Я попытался использовать это с CLI sw-precache, а также grunt-sw-precache. Моя конфигурация для Grunt выглядит следующим образом:

grunt.initConfig({
'sw-precache': {
  build: {
    baseDir: './public',
    workerFileName: 'service-worker.js',
    appendTimestamp: true,
    cacheId: 'cnbc-polymer-cache-20',
    clientsClaim: true,
    directoryIndex: 'index.html',
    navigateFallback: 'index.html',
    skipWaiting: true,
    maximumFileSizeToCacheInBytes: (1024000 * 20),
    staticFileGlobs: [
      '/src/**/*',
      '/index.html',
      '/manifest.json',
      '/bower_components/**/*',
      '/images/**/*.*',
      '/favicon.ico'
    ],
    verbose: true,
    runtimeCaching: [{
        urlPattern: /franchise/,
        handler: 'cacheFirst',
        options: {
          debug: true,
          cache: {
            maxEntries: 10,
            name: 'franchise-cache',
            maxAgeSeconds: 180
          }
        }
      }, {
        urlPattern: /story/,
        handler: 'cacheFirst',
        options: {
          debug: true,
          cache: {
            maxEntries: 10,
            name: 'story-cache',
            maxAgeSeconds: 180
          }
        }
      }]
  }
}

});

И при попытке с CLI я использовал следующий sw-precache-config.js:

module.exports = {
    baseDir: './public',
    workerFileName: 'service-worker.js',
    appendTimestamp: true,
    cacheId: 'cnbc-polymer-cache-20',
    clientsClaim: true,
    directoryIndex: 'index.html',
    navigateFallback: 'index.html',
    skipWaiting: true,
    maximumFileSizeToCacheInBytes: (1024000 * 20),
    staticFileGlobs: [
        '/src/**/*',
        '/index.html',
        '/manifest.json',
        '/bower_components/**/*',
        '/images/**/*.*',
        '/favicon.ico'
    ],
    verbose: true,
    runtimeCaching: [{
        urlPattern: /franchise/,
        handler: 'cacheFirst',
        options: {
            debug: true,
            cache: {
                maxEntries: 10,
                name: 'franchise-cache',
                maxAgeSeconds: 180
          }
        }
      }, {
          urlPattern: /story/,
          handler: 'cacheFirst',
          options: {
              debug: true,
              cache: {
                  maxEntries: 10,
                  name: 'story-cache',
                  maxAgeSeconds: 180
              }
          }
      }]
};

Все параметры конфигурации, кроме параметров runtimeCaching, применяются к созданному файлу service-worker.js.

Мой package.json настроен на использование "^4.2.3" из sw-precache и "^3.4.0" из sw-toolbox.

Я не видел, чтобы кто-то еще комментировал эту проблему. Кто-нибудь может прокомментировать, в чем может быть проблема, мешающая sw-precache соблюдать мои параметры runtimeCaching?

Answer 1

Грустно grunt-sw-precache не зависит от новейшего sw-precache, который вызывает runtimeCaching option и другие улучшения в том, как sw-precache правильно обрабатывает такие вещи, как requestRedirects.

Я сделал клон репо и необходимые изменения здесь. Я не собираюсь публиковать это в npm, но как временное решение (так что обратитесь к моему репозиторию github в вашем package.json!)

Answer 2

Пожалуйста, проверьте и убедитесь, что вы выполнили установку Grunt.

• grunt-sw-precache можно установить с помощью следующей команды:

  $ npm install grunt-sw-precache --save-dev

• включен grunt-sw-precache добавив следующее к вашему Gruntfile:

  grunt.loadNpmTasks('grunt-sw-precache');

Затем вы можете попробовать использовать handler: 'networkFirst' вместо handler: 'cacheFirst',

Как уже упоминалось в этом уроке,

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

Вы можете посетить этот пост GitHub для получения дополнительной информации о том, как и почему вы будете использовать sw-precache а также sw-toolbox библиотеки вместе, а также автономная кулинарная книга для получения дополнительной информации о стратегиях кэширования.