我的node.js Web 应用程序无法识别我的manifest.json

Question

我正在使用node.js、express.js 和handlebars 构建一个Web 应用程序。我的 Web 应用程序正在运行，现在我想将其转换为 PWA，因此我编写了这样的 manifest.json：

\n\n

{\n    "name": "Talleres Online",\n    "short_name": "Talleres Online",\n    "start_url": "./?utm_source=web_app_manifest",\n    "display": "standalone",\n    "background_color": "#44d1c8",\n    "theme_color": "#55bddc",\n    "orientation": "portrait",\n    "description": "Lleva el control de tu taller a donde vayas, con Talleres Online puedes gestionar el funcionamiento de tu taller mec\xc3\xa1nico \xc2\xa1desde cualquier dispositivo!",\n    "lang": "es-MX",\n    "icons": [{\n      "src": "icons/icon-32x32.png",\n        "sizes": "32x32",\n        "type": "image/png"\n      }, {\n      "src": "icons/icon-64x64.png",\n        "sizes": "64x64",\n        "type": "image/png"\n      }, {\n      "src": "icons/icon-128x128.png",\n        "sizes": "128x128",\n        "type": "image/png"\n      }, {\n        "src": "icons/icon-144x144.png",\n        "sizes": "144x144",\n        "type": "image/png"\n      }, {\n        "src": "icons/icon-152x152.png",\n        "sizes": "152x152",\n        "type": "image/png"\n      }, {\n        "src": "icons/icon-192x192.png",\n        "sizes": "192x192",\n        "type": "image/png"\n      }, {\n        "src": "icons/icon-256x256.png",\n        "sizes": "256x256",\n        "type": "image/png"\n      }, {\n        "src": "icons/icon-512x512.png",\n        "sizes": "512x512",\n        "type": "image/png"\n      }, {\n        "src": "icons/icon-1024x1024.png",\n        "sizes": "1024x1024",\n        "type": "image/png"\n      }]\n  }\n

\n\n

当我尝试在 devtools 上查找清单信息时，似乎没有 manifest.json，查看控制台它显示以下错误：

\n\n

\n

无法加载资源：服务器响应状态为 404（未找到）manifest.json:1

\n\n

清单：行：1，列：1，语法错误。清单.json:1

\n\n

获取http://localhost:3000/manifest.json 404（未找到）manifest.json:1

\n\n

清单：行：1，列：1，语法错误。

\n

\n\n

对于车把，我有一个 main.hbs 文件，其中包含 HTML 的 head 标签，其中 body 标签引用其他 .hbs 文件来构建网站，在这个 main.hbs 文件中，我放置了引用的元标签。清单.json。

\n\n

我已将manifest.json放在应用程序的根目录（就在node_modules文件夹的一侧）、/src文件夹和/public文件夹中，但它们都不起作用，我还连接了/manifest的路由。我向 manifest.json 文件发送了 json 请求，但它只是将错误从 404 更改为 500。

\n\n

有什么帮助吗？\n非常感谢，很抱歉这篇文章很长，而且英语不好。

\n\n

\nconst express = require(\'express\');\nconst morgan = require(\'morgan\');\nconst exphbs = require(\'express-handlebars\');\nconst path = require(\'path\');\nconst flash = require(\'connect-flash\');\nconst session = require(\'express-session\');\nconst MySqlStore = require(\'express-mysql-session\');\nconst passport = require(\'passport\');\n\nconst { database } = require(\'./keys\');\n\n//Inicializaciones\n\nconst app = express();\nrequire(\'./lib/passport\');\n\n//Configuraciones\n\napp.set(\'port\', process.env.PORT || 3000);\napp.set(\'views\', path.join(__dirname, \'views\'));\napp.engine(\'.hbs\', exphbs({\n    defaultLayout: \'main\',\n    layoutsDir: path.join(app.get(\'views\'), \'layouts\'),\n    partialsDir: path.join(app.get(\'views\'), \'partials\'),\n    extname: \'.hbs\',\n    helpers: require(\'./lib/handlebars\')\n}));\napp.set(\'view engine\', \'.hbs\');\n\n//Middlewares\n\napp.use(session({\n    secret: \'carhelpmysqlsession\',\n    resave: \'false\',\n    saveUninitialized: \'false\',\n    store: new MySqlStore(database)\n}));\napp.use(flash());\napp.use(morgan(\'dev\'));\napp.use(express.urlencoded({extends: false}));\napp.use(express.json());\napp.use(passport.initialize());\napp.use(passport.session());\n\n//Variables Globales\n\napp.use((req, res, next) => {\n    app.locals.success = req.flash(\'success\');  \n    app.locals.message = req.flash(\'message\');\n    app.locals.user = req.user; \n    next();\n});\n\n//Rutas\n\napp.use(require(\'./routes/index.js\'));\napp.use(require(\'./routes/authentication.js\'));\napp.use(require(\'./routes/carhelp.js\'));\napp.use(require(\'./routes/estados.js\'));\n\n\n\n// Public\napp.use(express.static(path.join(__dirname, \'public\')));\n\n//Inicializar Servidor\n\napp.listen(app.get(\'port\'), () => {\n    console.log(\'Server on port\', app.get(\'port\'));\n});\n\n

\n\n

问题解决了，但是这是我的快速配置，如果其他人有同样的问题可以轻松解决。

\n

Answer 1

所以它说syntax error。

我想看看你的清单 json 文件的格式是否正确。在代码片段中，我看到缺少{左括号，这在您复制时可能会出现问题。您可以尝试像这样的JSON Validator ，或者您可以使用它来验证您的清单文件。

如果一切正确，那么您可以清除浏览器缓存。

希望这对您有帮助。

更新：

manifest.json应该位于static/public您提供静态文件并将其用作 Express 静态文件的文件夹中。