next-pwa 运行时缓存不产生策略答案

【问题标题】：next-pwa runtimecaching does not produce strategiesnext-pwa 运行时缓存不产生策略
【发布时间】：2022-01-22 11:57:35
【问题描述】：

我开始使用 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 run dev 启动浏览器 -> fetch GET /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 条目之前或之后的 defaultRuntimeCaching 均无济于事。

任何使自定义 runtimeCache 规则正常工作的提示将不胜感激。

next.js 12.0.7

下一个pwa 5.4.4

node.js v14.18.2

【问题讨论】：

标签： next-pwa

【解决方案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"，但由于某种原因，服务工作者会在每次其他请求时重建，这导致应用程序停止运行。

【讨论】：