React项目无法在public文件夹外注册ServiceWorker问题如何解决？

1. 错误原因说明 #

你遇到的unsupported MIME type ('text/html')报错，是因为放在src目录或项目根目录的service worker脚本没有被React脚手架的静态资源服务正确识别，请求脚本时开发服务器返回了SPA通用的index.html兜底页面，而非js文件，触发MIME类型校验失败。无需调整service worker的存放位置，保持放在public目录下，通过配置扩展权限即可解决scope限制问题。

2. 扩展service worker的scope权限 #

默认public目录下的service worker的scope仅覆盖/public路径，要让它覆盖全站（包括src编译后的资源路径），需要完成两个配置：

• 注册service worker时主动指定scope为根路径，修改你的注册代码即可：

  // 若注册逻辑写在public/index.html中，写法如下
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/service-worker.js', {
        scope: '/'
      }).then(registration => {
        console.log('SW注册成功，scope: ', registration.scope);
      }).catch(err => {
        console.log('SW注册失败: ', err);
      });
    });
  }
  
  // 若使用serviceWorkerRegistration.js注册，找到文件内的register方法，添加scope参数即可
  

• 添加Service-Worker-Allowed响应头授权scope扩展：
  本地开发环境如果是create-react-app项目，可以通过react-app-rewired修改webpack的devServer配置：

  // config-overrides.js
  module.exports = {
    devServer: function(configFunction) {
      return function(proxy, allowedHost) {
        const config = configFunction(proxy, allowedHost);
        config.headers = {
          'Service-Worker-Allowed': '/'
        };
        return config;
      };
    }
  };
  

  生产部署时在对应的静态服务器配置对应响应头即可，比如Nginx添加如下配置：

  add_header Service-Worker-Allowed /;
  

3. 缓存src目录资源的说明 #

src目录下的业务代码、组件等资源在项目编译打包后，都会被输出到build目录的静态资源路径下，不存在service worker需要直接访问源码目录src的情况，你只需要在service worker的缓存逻辑里匹配编译后的资源路径（比如/static/js/*、/static/css/*这类规则）即可，不需要直接操作源码路径。

内容的提问来源于stack exchange，提问作者Gabriel Porcher