接下来pwa运行时缓存不会产生策略

Question

我开始使用下一个pwa，基本设置就像魅力一样。现在它想使用运行时缓存选项，这对我来说不起作用：

我的next.config.js包括标准缓存项和一个自定义缓存项，该缓存项应使用StaleWhileRevalidate策略对每个发送到/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,
],
},
});

重新启动npm运行dev启动浏览器->获取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

Answer 1

经过一些研究，我发现：

在开发模式中，下一个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"，但由于某种原因，服务人员每隔一次请求就会重新构建，这使应用程序陷入停顿。