title: Next-offline and WorkboxOpts: Error: "runtimeCaching" is not a supported parameter. How to enable "runtimeCaching" in next.config.js
body: <p>I'm just getting started with <a href="https://github.com/hanford/next-offline" rel="nofollow noreferrer">next-offline</a> and found the section regarding workbox integration and its recipes.</p>
  <p>According to the docs:</p>
  <blockquote>
  <p>If you're new to workbox, I'd recommend reading this quick guide --
  anything inside of workboxOpts will be passed to
  workbox-webpack-plugin.</p>
  <p>Define a workboxOpts object in your next.config.js and it will gets
  passed to workbox-webpack-plugin. Workbox is what next-offline uses
  under the hood to generate the service worker, you can learn more
  about it here.</p>
  </blockquote>
  <p>After digging around, I found this great <a href="https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#which_plugin_to_use" rel="nofollow noreferrer">section</a>.</p>
  <p>Essentially it gives a suggestion to use two different options:</p>
  <p><a href="https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#generatesw" rel="nofollow noreferrer">GenerateSW</a> or <a href="https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#injectmanifest" rel="nofollow noreferrer">InjectManifest</a></p>
  <p>I would like to use the InjectManifest, however when I try to implement that in my <code>next.config.js</code> file. I get this error:</p>
  <pre><code>&quot;runtimeCaching&quot; is not a supported parameter.
  </code></pre>
  <p>This is my next.config.js:</p>
  <pre><code>const withCSS = require('@zeit/next-css');
  const withSass = require('@zeit/next-sass');
  const withImages = require('next-images');
  const optimizedImages = require('next-optimized-images');
  const withOffline = require('next-offline');
  
  module.exports = withOffline(
    withImages(
      optimizedImages(
        withCSS(
          withSass({
            // useFileSystemPublicRoutes: false,
            // generateSw: false, // this allows all your workboxOpts to be passed in injectManifest
            generateInDevMode: true,
            workboxOpts: {
              swDest: './service-worker.js', // this is the important part,
              exclude: [/.+error\.js$/, /\.map$/, /\.(?:png|jpg|jpeg|svg)$/],
              runtimeCaching: [
                {
                  urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
                  handler: 'CacheFirst',
                  options: {
                    cacheName: 'hillfinder-images'
                  }
                },
                {
                  urlPattern: /^https?.*/,
                  handler: 'NetworkFirst',
                  options: {
                    cacheName: 'hillfinder-https-calls',
                    networkTimeoutSeconds: 15,
                    expiration: {
                      maxEntries: 150,
                      maxAgeSeconds: 30 * 24 * 60 * 60 // 1 month
                    },
                    cacheableResponse: {
                      statuses: [0, 200]
                    }
                  }
                }
              ]
            },
            dontAutoRegisterSw: false,
            env: {
              MAPBOX_ACCESS_TOKEN: process.env.MAPBOX_ACCESS_TOKEN,
              useFileSystemPublicRoutes: false
            },
  
            webpack(config, options) {
              config.module.rules.push({
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                use: {
                  loader: 'url-loader',
                  options: {
                    limit: 100000,
                    target: 'serverless'
                  }
                }
              });
  
              return config;
            }
          })
        )
      )
    )
  );
  </code></pre>
  <p>Also when I check the <code>Application</code> pane, in devTools I see this:</p>
  <p><a href="https://i.stack.imgur.com/MLYwS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MLYwS.jpg" alt="enter image description here" /></a></p>
  <p>You'll notice what appears to me a duplication of fields i.e. <code>https-calls</code> and <code>hillfinder-https-calls</code> and <code>images</code> and <code>hillfinder-images</code>.</p>
  <p>I thought the <code>cacheName</code> field in the <code>options: {}</code> in each was allowing one to include a custom name?</p>
  <p>Just wondering if anyone has had experience setting this up?</p>
  <p>Thank you in advance!</p>