Next-offline 和 WorkboxOpts：错误：“runtimeCaching”不是受支持的参数。如何在 next.config.js 中启用“runtimeCaching”

Question

我刚刚开始使用 next-offline 并找到有关工作箱集成及其配方的部分。

根据文档：

如果您不熟悉 Workbox，我建议您阅读此快速指南 -- workboxOpts 中的任何内容都将传递给 workbox-webpack-plugin.

在你的 next.config.js 中定义一个 workboxOpts 对象，它会得到 传递给 workbox-webpack-plugin。 Workbox 是 next-offline 使用的 在幕后生成服务工作者，您可以了解更多信息 在这里。

在四处挖掘之后，我发现了这个很棒的section。

基本上它给出了使用两种不同选项的建议：

GenerateSW 或 InjectManifest

我想使用 InjectManifest，但是当我尝试在我的 next.config.js 文件中实现它时。我收到此错误：

"runtimeCaching" is not a supported parameter.

这是我的 next.config.js：

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const optimizedImages = require('next-optimized-images');
const withOffline = require('next-offline');

module.exports = withOffline(
  withImages(
    optimizedImages(
      withCSS(
        withSass({
          // useFileSystemPublicRoutes: false,
          // generateSw: false, // this allows all your workboxOpts to be passed in injectManifest
          generateInDevMode: true,
          workboxOpts: {
            swDest: './service-worker.js', // this is the important part,
            exclude: [/.+error\.js$/, /\.map$/, /\.(?:png|jpg|jpeg|svg)$/],
            runtimeCaching: [
              {
                urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
                handler: 'CacheFirst',
                options: {
                  cacheName: 'hillfinder-images'
                }
              },
              {
                urlPattern: /^https?.*/,
                handler: 'NetworkFirst',
                options: {
                  cacheName: 'hillfinder-https-calls',
                  networkTimeoutSeconds: 15,
                  expiration: {
                    maxEntries: 150,
                    maxAgeSeconds: 30 * 24 * 60 * 60 // 1 month
                  },
                  cacheableResponse: {
                    statuses: [0, 200]
                  }
                }
              }
            ]
          },
          dontAutoRegisterSw: false,
          env: {
            MAPBOX_ACCESS_TOKEN: process.env.MAPBOX_ACCESS_TOKEN,
            useFileSystemPublicRoutes: false
          },

          webpack(config, options) {
            config.module.rules.push({
              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
              use: {
                loader: 'url-loader',
                options: {
                  limit: 100000,
                  target: 'serverless'
                }
              }
            });

            return config;
          }
        })
      )
    )
  )
);

当我检查 Application 窗格时，在 devTools 中我看到了这个：

您会注意到在我看来重复的字段，即 https-calls 和 hillfinder-https-calls 和 images 和 hillfinder-images。

我认为每个 options: {} 中的 cacheName 字段允许包含自定义名称？

只是想知道是否有人有过设置的经验？

提前谢谢你！

Answer 1

（这些 cmets 适用于基本的 Workbox 构建工具，而不是专门适用于 next-offline 包装器，但我认为它们仍然准确。）

如果您使用InjectManifest 模式，那么您的想法是您编写所有的服务工作者逻辑，使用您需要的底层 Workbox，遵循类似于Getting Started 指南中描述的模型.您应该在 Service Worker 中的某处调用precacheAndRoute(self.__WB_MANIFEST)，然后InjectManifest 构建工具负责将self.__WB_MANIFEST 替换为包含要预缓存的URL 列表以及每个URL 的修订信息的数组。

runtimeCaching 参数与InjectManifest 不兼容。这是一个可以在GenerateSW 模式下使用的参数，在 Workbox 构建工具中，它会为您创建一个完整的服务工作者（包括运行时缓存路由）。 GenerateSW 模式采用声明性配置，并根据该配置为 service worker 输出代码。如果这听起来不错——如果你只是想配置一些构建选项并因此获得一个完整的服务工作者——那么使用GenerateSW 是正确的选择。