使用 workbox-webpack-plugin 时启用日志记录

Question

我的项目有一个使用 Workbox 的 service worker 的旧部分实现。我一直在尝试更新它并在此过程中添加功能。在此过程中的某个地方，我丢失了开发控制台中的 Workbox 日志（Chrome 版本 81.0.4044.129）。

我不确定这是什么时候发生的，因为我在尝试升级和添加 workbox-window 时并没有太注意它们，但我希望它们现在回来.

我正在使用 workbox-webpack-plugin 和 workbox-window 的 v5.1.3。

我的 webpack 配置如下所示：

      new WorkboxWebpackPlugin.InjectManifest({
        swSrc: './src/src-serviceWorker.js',
        swDest: 'serviceWorker.js',
        exclude: [/\.map$/, /asset-manifest\.json$/]
      }),

我的 service worker 文件如下所示：

import { precacheAndRoute } from 'workbox-precaching'
import { registerRoute } from 'workbox-routing'
import { CacheFirst } from 'workbox-strategies'


precacheAndRoute(self.__WB_MANIFEST)
self.__WB_DISABLE_DEV_LOGS = false


registerRoute(
  /https:\/\/api\.***\.com\/graphql/,
  new CacheFirst()
)

该应用程序本身是一个 React 应用程序，最初是使用 create-react-app 创建的，但后来被弹出。我只在进行生产构建时查找日志，然后使用 http-server 包在本地主机上运行。

我检查了 workbox debugging page 这就是我在行 self.__WB_DISABLE_DEV_LOGS = false 中添加的原因，但没有任何区别。

有什么办法可以取回日志吗？这会让我的生活更轻松，因为我正在尝试向服务工作者添加移动功能。我还仔细检查了 Chrome 开发人员工具中是否显示了所有级别的日志记录，包括详细的。

我还添加了自己的日志，它们确实显示了，所以我知道正在调用 service worker。

Answer 1

不幸的是，这在当前文档中被隐藏了一点，但我认为文档的“Keeping dev-only code out of the bundle”部分解释了正在发生的事情。

Workbox 的未捆绑源代码 contains a lot of verbose logging statements guarded by if (process.env.NODE_ENV !== 'production') {...} clauses. webpack automatically substitutes process.env.NODE_ENV 'development' 或 'production' 基于您的 mode 配置选项的值。

因此，如果您在 webpack 编译中使用 mode: 'production'，您将获得一个更小的 Workbox 包，但它不包含任何冗长的日志记录语句。（仍然会有一些不太详细的错误记录。）

self.__WB_DISABLE_DEV_LOGS = false 很有用 如果您使用的是 Workbox 的开发版本（即，如果 process.env.NODE_ENV 在捆绑步骤），但无论如何你都想禁用详细日志记录。

使用 workbox-webpack-plugin 时启用日志记录

Enabling logging when using workbox-webpack-plugin

logging

service-worker

workbox

workbox-webpack-plugin

workbox-window