next-pwa runtimecaching不产生策略。

Question

我开始使用next-pwa，基本的设置就像一种魅力。现在，它想使用运行时缓存选项，它对我不起作用：

我的next.config.js包括标准的缓存条目和一个自定义的缓存条目，对于到/api/todoitem的每个请求，都应该使用策略StaleWhileRevalidate：

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

重新启动npm运行dev启动浏览器-> fetch /api/todoitem ->和console.log告诉我

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

我尝试了许多正则表达式的组合，包括runtimeCache条目之前或之后的runtimeCache，但都没有效果。

任何提示，以使自定义runtimeCache规则工作，将不胜感激。

next.js 12.0.7

next-pwa 5.4.4

node.js v14.18.2

Answer 1

经过一些研究，我发现：

在开发模式下，next-pwa创建一个禁用缓存的服务工作人员。它甚至在控制台上告诉我这一点；-)

[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.

在通过next build构建应用程序时，它创建了一个使用我的自定义规则的服务工作人员，并且在启动应用程序next start时，规则似乎是有效的。

调试有点困难，所以我尝试在我的开发人员机器上设置mode: "production"，但是由于某种原因，服务工作者会在其他请求中重新生成，从而使应用程序陷入停滞。