Next-offline and WorkboxOpts: Error: "runtimeCaching" is not a supported parameter. How to enable "runtimeCaching" in next.config.js

Question

I'm just getting started with next-offline and found the section regarding workbox integration and its recipes.

According to the docs:

If you're new to workbox, I'd recommend reading this quick guide -- anything inside of workboxOpts will be passed to workbox-webpack-plugin.

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.

After digging around, I found this great section.

Essentially it gives a suggestion to use two different options:

GenerateSW or InjectManifest

I would like to use the InjectManifest, however when I try to implement that in my next.config.js file. I get this error:

"runtimeCaching" is not a supported parameter.

This is my next.config.js:

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;
          }
        })
      )
    )
  )
);

Also when I check the Application pane, in devTools I see this:

You'll notice what appears to me a duplication of fields i.e. https-calls and hillfinder-https-calls and images and hillfinder-images.

I thought the cacheName field in the options: {} in each was allowing one to include a custom name?

Just wondering if anyone has had experience setting this up?

Thank you in advance!

Answer 1

(These comments apply to the basic Workbox build tools, not specifically to the next-offline wrapper, but I think they're still accurate.)

If you're using InjectManifest mode, the idea is that you write all of your service worker logic, using the underlying pieces of Workbox that you need, following a model that's similar to what's described in the Getting Started guide. You should include a call to precacheAndRoute(self.__WB_MANIFEST) somewhere in your service worker, and then the InjectManifest build tool is responsible for swapping out self.__WB_MANIFEST with an array containing the list of URLs to precache, along with revision information for each URL.

The runtimeCaching parameter is not compatible with InjectManifest. It's a parameter that can be used in GenerateSW mode, in with the Workbox build tool creates an entire service worker for you (including runtime caching routes). The GenerateSW mode takes in a declarative configuration and spits out the code for service worker based on that configuration. If that sounds good—if you'd just like to configure some build options and get a complete service worker as a result—then using GenerateSW is the right choice.