小记一则强制更新 Service-Worker 的方法

众所周知现在 Service-Worker 几乎是项目标配，vue、react 的脚手架工具都有推荐使用 PWA，但对 Service-Worker 管理不善或一旦你的静态资源文件出现问题，会对于线上业务造成毁灭打击。我们最新的一个项目中使用了蚂蚁金服家的 Ant-Desgin-Pro 开箱即用中台系统，自带 PWA ，所以这里针对的是如果你的线上环境已经存在 Service-Worker，在尽可能减少影响用户体验的情况下卸载。

注意 直接更改你的 Service-Worker 里的方法是不起作用的，因为你还需要 Service-Worker 能够工作，以保证版本兼容性和卸载也能够正常工作。

• 先直接上菜 在你的程序入口文件（如果你是 SPA 应用）或者其他可以在任何函数执行前的地方加上

navigator.serviceWorker.getRegistrations().then(function (registrations) {
  for (let registration of registrations) {
    registration.unregister()
  }
})

这样会让浏览器直接卸载你的 Service-Worker ，但同时能够保存 Service-Worker 其他任务可以正常运行，打开 NetWork 刷新你还是可以看到部分资源就可以走 Service-Worker。

• Service-Worker 带来的问题 如果只是来着求个解的小伙伴可以撤了，下面分析一下什么情况我们需要依靠每次进入程序卸载 Service-Worker 来保证正常运行。 现在大部分前端资源都是走 CDN，比如我们使用的是七牛云 CDN 每次发布的时候依靠 NodeJS 把静态资源放到 OSS 上，之前我们发现如果我们不指定上传的 mime-type 的时候 Service-Worker 会报错但是不影响系统正常运行，在我们某次发布以后指定了 mime-type 但其中有一个主 js 资源被错误的标记成了 image/png 类型 这个时候进入网站已经有异常了，但最可怕的是 Service-Worker 把这个错误的资源缓存下来，我们把类型更正并且手动刷新了七牛的缓存，Service-Worker 始终还是调用的他缓存的那个错误 mime-type 资源。这个时候使用 cmd+shift+r 强制刷新是有效的 但是再次普通刷新一夜回到解放前。在这种情况下我们尝试了很多种方法，当然最直接的是去 Chrome 管理 Service-Worker 的地方删掉我们的缓存，但我们总不可能要求客户去做这样的事情。最后才发现进入卸载的方法。