如何为生成的 service worker 禁用 workbox-webpack-plugin 的警告答案

【问题标题】：How to disable warnings for workbox-webpack-plugin for generated service worker如何为生成的 service worker 禁用 workbox-webpack-plugin 的警告
【发布时间】：2021-07-10 18:05:00
【问题描述】：

我为工人一代使用 GenerateSw 类。它工作正常，但我需要为离线页面预缓存一些 webpack 未处理的资源，所以我使用：

additionalManifestEntries: [
    '/offline',
    'https://static.express/img/laksjhdaskldfjlaljsafsp/connection-lost.svg'
]

但我面临这个警告，即使 mode 属性设置为 prod。

问题：我可以隐藏它们吗？

【问题讨论】：

标签： webpack progressive-web-apps workbox-webpack-plugin

【解决方案1】：

您可以通过切换到具有url: 属性和revision: null 属性的对象来避免这些警告，以表明它们已经根据其网址进行了唯一的修订。

additionalManifestEntries: [
  {url: '/offline', revision: null},
  {url: 'https://static.express/img/.../connection-lost.svg', revision: null},
]

但是...如果您这样做，并且您的 URL 实际上不包含任何唯一的修订信息，那么您的用户最终将无限期地“卡住”例如/offline 的旧副本，甚至当您对/offline 进行更改并重新部署时。这就是为什么 Workbox 让这样做变得“困难”。

缓存其他 URL 的更好方法是设置一个运行时缓存路由，该路由将对其使用特定策略，并可能使用 these techniques“温暖”该策略缓存。例如，对这些 URL 使用 StaleWhileRevalidate 策略将确保它们最终会得到更新。

【讨论】：

谢谢杰夫！ “变暖策略”听起来很酷，但据我所知，只有在路由时加载的文件才能传递给这个策略。离线页面永远不会被访问，直到没有连接，这就是为什么我需要预先缓存。
使用“warming”，您可以在 service worker 的 install 步骤中预填充运行时缓存。这与使用 workbox-precaching 时发生的情况非常相似，只是您将依赖运行时策略来保持资源最新，而不是使用预缓存清单。