next-pwa runtimecaching does not produce strategies

Question

I start using next-pwa and the basic setup worked like a charm. Now it want to play with the runtime caching option, which does not work for me:

My next.config.js includes the standard cache entries plus a custom one that should use the strategy StaleWhileRevalidate for each request going to /api/todoitem:

const withPWA = require("next-pwa");
const defaultRuntimeCaching = require("next-pwa/cache");

module.exports = withPWA({
  reactStrictMode: true,
  pwa: {
    dest: "public",
    disable: false, // disable PWA
    register: true,
    skipWaiting: true,
    runtimeCaching: [
      {
        urlPattern: /\/api\/todoitem/,
        method: "GET",
        handler: "StaleWhileRevalidate",
        options: {
          cacheName: "todoApp-api",
          expiration: {
            maxEntries: 64,
            maxAgeSeconds: 24 * 60 * 60, // 24 hours
          },
        },
      },
      ...defaultRuntimeCaching,
    ],
  },
});

Restart npm run dev fire up the browser -> fetch GET /api/todoitem -> and console.log tells me

workbox Network request for '/api/todoitem' returned a response with status '200'.
workbox Using NetworkOnly to respond to '/api/todoitem'

I tried a number of combinations of regexes, including defaultRuntimeCaching before or after my runtimeCache entry to no avail.

Any hints to get custom runtimeCache rules working would be greatly appreciated.

next.js 12.0.7

next-pwa 5.4.4

node.js v14.18.2

Answer 1

After some research I found:

In development mode, next-pwa creates a service worker that disables caching. It even tells me so on the console ;-):

[PWA] Build in development mode, cache and precache
are mostly disabled. This means offline support is
disabled, but you can continue developing other
functions in service worker.

When building the app via next build it creates a service worker that uses my custom rules and when starting the app next start the rules seem to work.

A bit hard to debug, so I tried to set mode: "production" on my developer machine but then for some reason the service worker gets rebuilt at every other request which brings the app to a grinding halt.