Nextjs移除工作盒控制台。日志消息

Question

Answer 1

将pwa模式设置为生产禁用控制台记录.试试这个：

下一个配置。js

// inside of next.config.js
module.exports = withPWA({
    pwa: {
      dest: 'public',
      mode: 'production'
    },
 });

这对我有用。在https://www.npmjs.com/package/next-pwa#user-content-tips找到这个

通过在next的pwa部分中指定选项mode:“production”，强制next pwa生成worker box生产构建。配置。js。尽管next pwa在开发期间（通过运行next）自动生成worker box开发构建，在生产期间（通过运行next build和next start）自动生成worker box生产构建。即使在开发web应用程序的过程中，您可能仍然希望将其强制用于生产版本，原因如下：减少由于生产版本不包括日志记录而导致的日志记录噪音。由于生产构建得到了优化和缩小，性能有所提高。

Answer 2

看起来我注册了一个服务人员指向我的http://localhost:3000在过去的PWA项目中工作时。我通过从我的Chrome开发工具中删除（注销）服务人员来修复此问题chrome://serviceworker-internals/?devtools

就是这样，这个问题帮助我如何卸载服务人员？

Answer 3

从下一个pwa文档的提示部分：

您需要做的就是在项目的根目录中创建worker目录，并放置索引。其中的js文件：

// To disable all workbox logging during development, you can set self.__WB_DISABLE_DEV_LOGS to true
// https://developers.google.com/web/tools/workbox/guides/configure-workbox#disable_logging

// eslint-disable-next-line no-underscore-dangle,no-restricted-globals
self.__WB_DISABLE_DEV_LOGS = true;

然后重启服务器——控制台中不能有日志。

我还发现另一个有用的选项-在开发过程中完全禁用软件。您可以使用下一步中的禁用选项来执行此操作。配置。js，这里是我的示例：

const path = require('path');
const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');

module.exports = withPWA({
  pwa: {
    dest: 'public',
    scope: '/',
    runtimeCaching,
    disable: process.env.NODE_ENV === 'development',
  },
  sassOptions: {
    includePaths: [path.join(__dirname, 'assets/jss/vendor')],
  },
});