在开发模式下禁用服务工作者。答案

【问题标题】：Disable service workers when in development mode.在开发模式下禁用服务工作者。
【发布时间】：2021-10-20 21:40:11
【问题描述】：

在我们的开发中，我们提供来自 https://localhost 的文件，因为该应用程序托管在 salesforce.com 中。在 chrome 中，chrome 上的 service worker 会阻止来自自签名服务器的任何内容，即 (https://localhost)。

那么有没有办法在开发模式下禁用/注销服务工作者。为此要遵循的任何模式。

谢谢

【问题讨论】：

标签： service-worker

【解决方案1】：

您可以使用 chrome devtools，并在 Application>Service Workers 路径下选择 Update on refresh 复选框

您还可以使用 Bypass for network 复选框来避免 Service Worker 的注册事件表单触发。

【讨论】：

是的，但是每次我刷新页面时，Service Worker 都会被注册。我不希望这种情况发生。谢谢
然后选择上图中的Bypass for network 选项以避免注册
对我来说，将Bypass for network 与点击stop 组合起来就可以了。

【解决方案2】：

这是一种蛮力方法：

const fn = () => {};

navigator.serviceWorker.register = () => new Promise(fn, fn);

（在 Chrome Canary 和 Firefox 开发者版中测试）

【讨论】：

【解决方案3】：

导航：Dev Tools > Application > Service Workers
启用：Bypass for network

这将阻止浏览器引用 Service Worker 的内容。当您不想在每次保存时都进行缓存清除时，这对于开发非常有用。

【讨论】：

【解决方案4】：

此解决方案特定于使用 Next-PWA 库来实现 PWA 的 NextJS 项目，但它在后台使用 Google 的 Workbox 来运行 service-workers，因此它可能会帮助人们更深入地挖掘。

// next.config.js

const withPWA = require('next-pwa')
 
module.exports = withPWA({
  pwa: {
    disable: process.env.NODE_ENV === 'development',
    // ...
  }
})

参考资料：

https://github.com/GoogleChrome/workbox/issues/1790#issuecomment-729698643 https://www.npmjs.com/package/next-pwa?activeTab=readme#configuration

【讨论】：