我正在尝试在Nodejs环境中构建一个渐进式Web应用程序。我在控制台面板中收到404和语法错误。我无法确定清单文件到底有什么问题。
service worker registered (pwa.js:3)
Failed to load resource: the server responded with a status of 404 (Not Found) (manifest.json:1)
Manifest: Line: 1, column: 1, Syntax error. (manifest.json:1)
caching shell assets (sw.js:14)
我的根目录结构：
/node_modules/
/public/
css/
images/
home.html
index.html
pwa.js
sw.js
/app.js
manifest.json
package.json
这是我的manifest.json文件
{
"name": "PlayPack",
"short_name": "PlayPack",
"start_url": "/public/index.html",
"display": "standalone",
"background_color": "#FFE9D2",
"theme_color": "#FFE1C4",
"orientation": "portrait-primary",
"icons": [
{
"src": "/public/images/icons/icon-72x72.png",
"type": "image/png",
"sizes": "72x72"
},
{
"src": "/public/images/icons/icon-96x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/public/images/icons/icon-128x128.png",
"type": "image/png",
"sizes": "128x128"
},
{
"src": "/public/images/icons/icon-144x144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/public/images/icons/icon-152x152.png",
"type": "image/png",
"sizes": "152x152"
},
{
"src": "/public/images/icons/icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/public/images/icons/icon-384x384.png",
"type": "image/png",
"sizes": "384x384"
},
{
"src": "/public/images/icons/icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}
app.js
const express = require("express");
const bodyParser = require('body-parser');
const app = express();
const http = require('http').Server(app);
const port = process.env.PORT || 3000;
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get("/", (req, res) => {
res.sendFile(__dirname + "public/index.html");
});
app.get("/home", (req, res) => {
res.sendFile(__dirname + "/public/home.html");
});
pwa.js文件检查if（'navigator中的'serviceWorker'）{}并注册service worker。它什么也没做。
我想知道在清单文件中是否真的有必要指定index.html文件？
显然，我以前没有在PWA上工作。请指导我
UPDATE 1：出于测试目的，我尝试在实时服务器中运行，而不是在节点环境中运行。 （我住的服务器是npm）。并且必须进行以下更改。
将index.html和sw.js从/ public文件夹移到我有manifest.json的根目录中（因为它在公用文件夹中不起作用）]]
因此，在清单文件中，“ start_url”：“ /index.html”
类似地，在index.html文件中，href =“ / manifest.json”>
现在我看不到任何错误。
但是我需要让它仅在节点服务器上工作
UPDATE 2：
连同上面的[[Update 1更改，以及app.js中的以下代码修改：app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
...我试图在节点环境“ node app.js”中再次运行它我收到此错误
localhost/:1 Refused to apply style from 'http://localhost:3000/public/css/resets.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:1 Refused to apply style from 'http://localhost:3000/public/css/styles-login.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
logo-sq.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
pwa.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
manifest.json:1 Failed to load resource: the server responded with a status of 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
localhost/:1 Refused to apply style from 'http://localhost:3000/public/css/resets.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:1 Refused to apply style from 'http://localhost:3000/public/css/styles-login.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
我正在尝试在Nodejs环境中构建一个渐进式Web应用程序。我在控制台面板中收到404和语法错误。我无法确定清单文件到底有什么问题。服务人员...