Service Worker文件位置为何影响注册？React PWA配置疑问

为什么Service Worker文件位置会影响注册可访问性？ #

这是Create React App（CRA）的资源处理规则决定的：

• public目录是CRA的静态资源根目录，构建时会将该目录下的文件原封不动复制到最终输出目录（build）的根路径。浏览器可直接通过根URL（比如/service-worker.js）访问这些文件，完全符合Service Worker对同源静态文件的访问要求。
• src目录是源码目录，里面的文件会被Webpack编译、打包成带hash的chunk文件，不会直接暴露给浏览器。如果没有额外配置，浏览器无法直接访问src目录下的原始文件。当你尝试注册./service-worker.js时，服务器找不到该文件，会触发SPA的 fallback 机制返回index.html，这就是报错中MIME类型为text/html的原因。

另外，Service Worker的注册路径是相对于页面根URL的，浏览器要求它必须是可直接访问的同源静态资源，不能是Webpack打包后的chunk文件，这也限制了它无法直接从src目录被访问。

如何让service-worker.js存放在src目录下仍可被访问？ #

可以通过修改Webpack配置，将src目录下的service-worker.js复制到输出目录的根路径，具体步骤如下：

1. 安装自定义配置工具和文件复制插件：

npm install @craco/craco copy-webpack-plugin --save-dev

2. 在项目根目录创建craco.config.js，添加文件复制规则：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  webpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: 'src/service-worker.js', to: './' }
        ]
      })
    ]
  }
};

3. 修改package.json中的启动/构建脚本，替换为craco命令：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

4. 保持serviceWorkerRegistration.js中的注册路径为/service-worker.js即可——构建时文件会被复制到build根目录，浏览器能正常访问。

内容的提问来源于stack exchange，提问作者Smelly Potato