服务工作者不使用create-react-app

Question

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

两周前一切正常，我能够使用生成的service-worker缓存所有文件。但是从今天起我总是遇到错误：

在Chrome上：Uncaught (in promise) Error: Request for http://localhost:5000/index.html?_sw-precache=aee80fca0f83208cc4d82ae2ccfda3c1 returned a response with status 301 at service-worker.js:1。

在Firefox上：Service worker event waitUntil() was passed a promise that rejected with 'TypeError: NetworkError when attempting to fetch resource.'.

我完全不知道错误发生的原因。

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

重现的步骤：

1. npx create-react-app my-app
2. cd my-app
3. npm run build
4. serve -s build
5. open app in browser

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

编辑：

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

C:PATH-TO-PROJECT>npm run build

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

Creating an optimized production build... Compiled successfully.

File sizes after gzip:

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

The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages:

"homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed. You may serve it with a static server:

serve -s build

Find out more about deployment here:

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）可能解决了我的问题。