Angular2迁移为Rails应用后service-worker.js跨域错误，如何清除旧Service Worker？

嘿，我之前也碰到过类似的框架迁移后Service Worker遗留问题，给你几个实用的方法来自动清理用户浏览器里的旧Angular Service Worker，完全不用麻烦用户手动操作：

方法1：在Rails中提供卸载用的service-worker.js #

给你的Rails应用添加专门的路由和控制器逻辑，当浏览器请求/service-worker.js时，返回一段卸载脚本：

1. 在config/routes.rb中添加路由：

get '/service-worker.js', to: 'service_worker#unregister'

2. 创建对应的控制器app/controllers/service_worker_controller.rb：

class ServiceWorkerController < ApplicationController
  def unregister
    # 设置强缓存失效头，确保浏览器获取最新的卸载脚本
    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    response.headers['Pragma'] = 'no-cache'
    response.headers['Expires'] = '0'
    
    # 返回卸载Service Worker的脚本
    render plain: <<~JS, content_type: 'application/javascript'
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations().then(function(registrations) {
          for (const registration of registrations) {
            registration.unregister();
          }
        });
      }
    JS
  end
end

这样，当用户的浏览器自动请求旧的Service Worker文件时，就会执行这段脚本，自动卸载所有已注册的Service Worker。

方法2：在页面中添加内联清理脚本 #

在你的Rails布局文件（比如app/views/layouts/application.html.erb）的<body>末尾添加一段内联脚本，页面加载时自动清理旧Service Worker：

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      // 获取所有已注册的Service Worker并卸载
      navigator.serviceWorker.getRegistrations().then(function(registrations) {
        registrations.forEach(function(registration) {
          registration.unregister();
        });
      });
    });
  }
</script>

这个方法能确保用户打开网站时，不管浏览器有没有自动请求Service Worker文件，都会主动执行清理操作。你可以保留这段脚本几周，等大部分用户都完成清理后再移除。

方法3：利用HTTP响应头强制失效并清理 #

如果你不想额外创建控制器，也可以在ApplicationController中添加全局拦截逻辑：

class ApplicationController < ActionController::Base
  before_action :handle_service_worker_cleanup

  private

  def handle_service_worker_cleanup
    return unless request.path == '/service-worker.js'
    
    # 禁止缓存这个响应
    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    response.headers['Pragma'] = 'no-cache'
    response.headers['Expires'] = '0'
    
    # 返回卸载脚本
    render plain: <<~JS, content_type: 'application/javascript'
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations().then(regs => regs.forEach(r => r.unregister()));
      }
    JS
  end
end

额外提示 #

• 可以同时使用多种方法，确保覆盖所有用户场景（比如有些用户浏览器可能缓存了旧的页面，没加载到内联脚本，但会请求service-worker.js）
• 这些方法都是自动执行的，不需要用户手动去浏览器设置里清除Service Worker
• 建议保留这些清理逻辑2-4周，之后可以移除，因为大部分活跃用户的浏览器已经完成了旧Service Worker的卸载

内容的提问来源于stack exchange，提问作者Juan Fuentes