0

我开始使用 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 规则正常工作的提示将不胜感激。

下一个.js 12.0.7

下一个 pwa 5.4.4

node.js v14.18.2

4

1 回答 1

0

经过一番研究，我发现：

在开发模式下，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"在我的开发人员机器上进行设置，但由于某种原因，服务工作者在每次其他请求时都会重建，这导致应用程序停止运行。

于 2022-01-03T23:32:17.830 回答