javascript - 找不到 create-react-app build service-worker.js 和 manifest.json

Question

我已经使用 create-react-app 创建了一个应用程序。我已经构建了它，并且编写了一个简单的快速应用程序来为 react 构建的应用程序提供服务。
我对静态文件和 Express 应用程序根文件夹中的文件(例如 manifest.json、service-worker.js)有一些问题。现在我在这两个文件上都得到了 404。
我怎样才能快速处理这些文件？它们必须在静态文件夹中吗？我必须修改 react 应用程序吗？
我去看了react build生成的文件，里面导入了'service-worker.js'文件，字符串以'/'开头(也就是'/service-worker.js')

(自创建项目以来，我没有接触过 pwa 的文件)

Here there's my root folder of my express app

我只添加了 project.json 和 index.js(显然还有 node_modules)，其他文件来自 React 构建。

这是我的 express 应用:

const compression = require('compression');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use('/sketches', express.static('sketches'));
app.use('/static', express.static('static'));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));  
app.use(compression());

app.get('/', (req, res) => res.sendFile(__dirname + '/index.html'))

app.listen(process.env.PORT || 3000, () => console.log('server listening!'))

添加这行代码我得到了 service-worker.js 但我无法得到 sketches 文件夹中的文件。

app.use('/', express.static(__dirname));

Answer 1

我遇到了同样的问题，我按照这些步骤解决了。

警告:我是这些技术的新手，对网络安全知之甚少。这可能不是最好的方法。

我使用 ejs 模板引擎和 express 让它工作，但它也应该适用于您的情况。

1) 创建 react 应用

2) yarn 构建

3) 将静态文件夹复制到 public

4) 也复制静态文件夹中的 service-worker.js

5) 进入主菜单 Ctrl + f

6) 在搜索中输入/service-worker.js 按 Enter

7) 你会看到类似的东西 var e="/service-worker.js";

8) 更改为 var e="/static/service-worker.js

9) 最后打开service-worker.js把/index.html改成/

precacheConfig=[["/","d6be891ca003070326267be1d2185407"]