Html 使用NodeJS和ExpressJS托管静态渐进式Web应用程序（PWA）

我正在尝试使用ExpressJS托管一个静态渐进式Web应用程序，但由于我对Web开发还比较陌生，所以遇到了一些问题

我已经找到了许多关于如何使用ExpressJS进行路由的优秀文章（请参见下面的链接），但没有一篇帮助我解决问题。这些教程非常基础，我找不到任何更高级的教程-如果你们知道任何教程，请回复到这个帖子并链接它们

https://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm
https://stormpath.com/blog/build-nodejs-express-stormpath-app
https://zellwk.com/blog/crud-express-mongodb/
https://www.codementor.io/nodejs/tutorial/build-website-from-scratch-using-expressjs-and-bootstrap

我的文件夹结构如下所示：

node_modules
package.json
server.js 
index.html
sw.js (service worker)
public/
    js/
        index.js
    style/
        index.css

var express = require('express');
var app = express();

// Initialize static content
app.use(express.static('public'));

app.get('/index.html', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});
app.listen(8887);

<link rel="stylesheet" href="public/style/index.css">
<script src="public/js/index.js"></script>

我的server.js如下所示：

node_modules
package.json
server.js 
index.html
sw.js (service worker)
public/
    js/
        index.js
    style/
        index.css

var express = require('express');
var app = express();

// Initialize static content
app.use(express.static('public'));

app.get('/index.html', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});
app.listen(8887);

<link rel="stylesheet" href="public/style/index.css">
<script src="public/js/index.js"></script>

在我的index.html中，我加载public/style/index.css样式表和public/js/index.js javascript，如下所示：

node_modules
package.json
server.js 
index.html
sw.js (service worker)
public/
    js/
        index.js
    style/
        index.css

var express = require('express');
var app = express();

// Initialize static content
app.use(express.static('public'));

app.get('/index.html', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});
app.listen(8887);

<link rel="stylesheet" href="public/style/index.css">
<script src="public/js/index.js"></script>

当我使用命令'node server.js'托管我的应用程序并导航到时，我得到了正确的index.html文件，但没有index.css文件

以下是我的问题：

未正确提供我的样式表（index.html） 没有任何css）

浏览器没有接收服务人员（sw.js）

---

编辑：将sw.js移动到公共/文件夹会在服务工作者加载：GET net:：ERR_INVALID_响应时导致错误

---

编辑2：更多服务人员错误：

我建议注册express static，如下所示：

var path = require('path');
app.use(express.static(path.join(__dirname, 'public')));

<link rel="stylesheet" href="/style/index.css">
<script src="/js/index.js"></script>

然后，像这样引用您的脚本：

var path = require('path');
app.use(express.static(path.join(__dirname, 'public')));

<link rel="stylesheet" href="/style/index.css">
<script src="/js/index.js"></script>

---

服务人员正在做什么？

从脚本src和link href中删除“public”。还有一件事，index.js不缺失吗？或者你是指index.json？抱歉，你是对的-index.json是我的错别字，应该是index.js。从我的脚本中删除public可以解决脚本加载问题，但不会解决服务人员的问题在没有/public/worked的情况下引用我的脚本，如“/style/index.css”，谢谢！我的服务人员正在缓存这些资源（css和javascript脚本），以及一些推送通知内容。但是，服务人员仍然没有被接收。@antig如何启动服务人员？节点工头可能会帮助您：服务人员是一项非常新的技术，工作方式与其他文件非常不同。我可能错了，但我相信，当支持浏览器的服务人员对任何url执行请求时，它也会从该url的根域请求服务人员。你可以在服务人员的@Antag上读到，我理解了一些完全不同的东西。很抱歉：）没问题，我之前关于浏览器如何加载服务人员的评论实际上是完全错误的（我想）。但是你帮我解决了这个问题，谢谢斯瓦贝尔！