使用react-scripts v1.0.17+Service Worker构建后无法访问静态文件

我之前也碰到过一模一样的问题，react-scripts v1.x版本的默认Service Worker（基于sw-precache）只会自动缓存Webpack打包生成的资源（也就是src目录代码编译后的文件），不会默认包含public文件夹下的静态资源。这就是你看到返回200但拿不到正确文件内容的核心原因——当Service Worker找不到请求的静态资源时，会返回SPA的index.html作为 fallback，所以状态码是200，但内容根本不是你要的静态文件。

下面是具体的解决步骤：

1. 自定义Service Worker的缓存配置 #

react-scripts v1.x支持通过package.json里的sw-precache字段扩展缓存规则，你只需要在package.json中添加以下配置：

"sw-precache": {
  "staticFileGlobs": [
    "public/**/*.{png,svg,ico,html,js,css}",
    "build/**/*.{js,css}"
  ],
  "stripPrefix": "public/",
  "replacePrefix": "./",
  "runtimeCaching": []
}

• staticFileGlobs：指定需要缓存的文件路径，这里覆盖了public下的所有图片、图标、HTML等静态文件，以及build后的打包资源
• stripPrefix：去掉路径中的public/前缀，因为build后public目录的内容会被复制到build根目录
• replacePrefix：替换为相对路径，匹配你设置的"homepage": "."

2. 重新构建项目 #

执行npm run build重新打包，此时生成的build/service-worker.js文件里应该已经包含了你需要的静态资源缓存条目。

3. 验证缓存是否生效 #

可以通过浏览器的DevTools（路径：Application -> Service Workers -> Cache Storage）查看缓存的资源列表，确认/icons/favicon-16x16.png这类文件已经被缓存。

额外注意点 #

• 如果你之前修改过src/registerServiceWorker.js，确保它保留默认逻辑——默认的registerServiceWorker会在build后自动注册生成的service-worker.js，不要随意替换成自定义的注册逻辑，除非你手动编写了完整的Service Worker文件。
• 测试离线状态时，记得先在在线状态下加载页面，让Service Worker完成缓存，再切换到离线模式测试。

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