javascript - Service Worker 不使用 create-react-app

Question

我正在使用 create-react-app用于生成 react.js 项目。如果使用命令 npm run build 进行生产构建，它会自动为渐进式 Web 应用程序功能实现服务 worker 。

两周前一切正常，我能够使用生成的 service-worker 缓存所有文件。但是从今天开始我总是出错:

在 Chrome 上:未捕获( promise )错误:请求 http://localhost:5000/index.html?_sw-precache=aee80fca0f83208cc4d82ae2ccfda3c1 在 service-worker.js:1< 返回状态为 301 的响应。

在 Firefox 上:Service worker 事件 waitUntil() 传递了一个被拒绝的 promise ，并返回“TypeError: NetworkError when attempt to fetch resource.”。

我完全不知道为什么会发生错误。

即使我创建了一个新的应用程序并且没有触及任何生成的文件，错误也会显示在浏览器控制台中。

重现步骤:

1. npx create-react-app my-app
2. cd my-app
3. npm run build
4. serve -s build
5. 在浏览器中打开应用

我在两台不同的机器上测试了它，但得到了相同的结果。非常感谢任何帮助。

编辑:

运行 npm run build 后的控制台输出:

C:PATH-TO-PROJECT>npm run build

> frontend@0.1.0 构建 C:\xampp\htdocs\gitlab\BA\App-PWA-progetraenke.app\frontend> react-scripts 构建

创建优化的生产构建...编译成功

gzip 后的文件大小:

164.04 KB build\static\js\main.d2519277.js 781 B build\static\css\main.77261875.css

该项目是在假设它托管在服务器根目录下构建的。您可以使用 package.json 中的主页字段来控制它。例如，添加此内容以针对 GitHub Pages 构建它:

“主页”:“http://myname.github.io/myapp”，

构建文件夹已准备好部署。您可以使用静态服务器提供它:

serve -s build

在此处了解有关部署的更多信息:

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

Answer 1

我在使用 Vue 的 PWA 模板创建的 VueJS 应用程序时遇到了同样的问题。对我来说，诀窍是更新到最新版本的 vue-cli 并提供服务。

更新到最新的服务版本 (8.1.4) 可能解决了我的问题。