Using sw-precache configured with runtimeCaching is not loading sw-toolbox

Question

According to the sw-precache documentation https://github.com/GoogleChrome/sw-precache#runtime-caching including configuration for runtime caching for sw-precache should itself take care of including sw-toolbox for runtime caching of dynamic content. I have tried using this with sw-precache's CLI as well as grunt-sw-precache. My configuration for Grunt is as follow:

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
          }
        }
      }]
  }
}

});

And when trying with the CLI I used the following 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
              }
          }
      }]
};

All configuration options other than the runtimeCaching options are being applied to the generated service-worker.js file.

My package.json is configured to use "^4.2.3", of sw-precache, and "^3.4.0" of sw-toolbox.

I have not seen anyone else commenting of having this problem. Can anyone comment on what might be the issue preventing sw-precache from respecting my runtimeCaching options?

Answer 1

Please check and make sure that you have done Grunt Installation .

• grunt-sw-precache can be installed using the following command:

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

• enabled grunt-sw-precache by adding the following to your Gruntfile :

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

Then, you might want to try using handler: 'networkFirst' instead of handler: 'cacheFirst' .

As mentioned in this tutorial ,

Try to handle the request by fetching from the network. If it succeeds, store the response in the cache. Otherwise, try to fulfill the request from the cache. This is the strategy to use for basic read-through caching.

You may visit this GitHub post for more information on how and why you'd use sw-precache and sw-toolbox libraries together and also The offline cookbook for more information on caching strategies.

Answer 2

sadly grunt-sw-precache does not depend on the newest sw-precache which causes the runtimeCaching option and other improvements how sw-precache handles things like requestsRedirects correctly to be missing.

I made a clone of the repo and the necessary changes here . I have no intention on publishing this to npm, but as a temporary solution (so refer to my github repo in your package.json!)