Next.js 下一个脱机和WorkboxOpts:错误："；“运行时缓存”；不是受支持的参数。如何启用"；“运行时缓存”；在next.config.js中_Next.js_Workbox_Workbox Webpack Plugin_Next Offline

Next.js 下一个脱机和WorkboxOpts:错误："；“运行时缓存”；不是受支持的参数。如何启用"；“运行时缓存”；在next.config.js中

next.js

Next.js 下一个脱机和WorkboxOpts:错误："；“运行时缓存”；不是受支持的参数。如何启用"；“运行时缓存”；在next.config.js中,next.js,workbox,workbox-webpack-plugin,next-offline,Next.js,Workbox,Workbox Webpack Plugin,Next Offline,我刚刚开始，找到了关于workbox集成及其配方的部分根据文件：如果您是workbox新手，我建议您阅读本快速指南-- workboxOpts中的任何内容都将传递给 workbox网页包插件在next.config.js中定义workboxOpts对象，它将已传递到workbox网页包插件。Workbox是next offline使用的工具在引擎盖下生成服务人员，您可以了解更多信息关于这里在四处挖掘之后，我发现这个很棒本质上，它给出了使用两种不同选项的建议：或但是，当我试图在

我刚刚开始，找到了关于workbox集成及其配方的部分

根据文件：

如果您是workbox新手，我建议您阅读本快速指南-- workboxOpts中的任何内容都将传递给 workbox网页包插件

在next.config.js中定义workboxOpts对象，它将已传递到workbox网页包插件。Workbox是next offline使用的工具在引擎盖下生成服务人员，您可以了解更多信息关于这里

在四处挖掘之后，我发现这个很棒

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

或

但是，当我试图在我的

next.config.js

文件中实现时，我想使用InjectManifest。我得到这个错误：

"runtimeCaching" is not a supported parameter.

这是我的下一个.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;
          }
        })
      )
    )
  )
);

另外，当我检查

应用程序

窗格时，在devTools中我看到：

您会注意到在我看来是字段的重复，即

https调用

和

hillfinder https调用

和

图像

和

hillfinder图像

我认为每个中的

选项：{}

中的

cacheName

字段允许包含自定义名称

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

提前谢谢你

（这些注释适用于基本的Workbox构建工具，并不特别适用于下一个脱机包装器，但我认为它们仍然是准确的。）

如果您使用的是

InjectManifest

模式，那么您的想法是使用所需的底层工作盒，按照与指南中描述的类似的模型编写所有服务工作者逻辑。您应该在服务人员的某个地方包含对

precacheAndRoute（self.\uwb\u MANIFEST）

的调用，然后

InjectManifest

构建工具负责调出

self.\uwb\u MANIFEST

，其中包含要预缓存的URL列表以及每个URL的修订信息

runtimeCaching

参数与

InjectManifest

不兼容。它是一个可以在

GenerateSW

模式下使用的参数，在使用Workbox构建工具时，可以为您创建一个完整的service worker（包括运行时缓存路由）。

GenerateSW

模式接受声明性配置，并根据该配置为服务人员吐出代码。如果这听起来不错，如果您只想配置一些构建选项并获得一个完整的服务人员，那么使用

GenerateSW

是正确的选择。

（这些注释适用于基本的Workbox构建工具，而不是特别适用于

下一个脱机

包装器，但我认为它们仍然是准确的。）