我的 node.js 网络应用无法识别我的 manifest.json

Question

我正在构建一个带有 node.js、express.js 和把手的 Web 应用程序。我有网络应用程序，现在我想把它变成一个 PWA，所以我写了 manifest.json 这样的：

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

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

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

GET http://localhost:3000/manifest.json 404 (Not Found) manifest.json:1

Manifest: Line: 1, column: 1, Syntax error.

有了 handlebars，我有一个 main.hbs 文件，它有 HTML 的 head 标签和 body 标签引用其他 .hbs 文件来构建站点，在这个 main.hbs 文件是我放置引用 manifest.json.

的元标记的地方

我已将 manifest.json 放在应用程序的根目录（就在 node_modules 文件夹的旁边）、/src 文件夹和 /public 文件夹中，并且none 其中有效，我还将 /manifest.json 请求的路由连接到 manifest.json 文件，但它只是将错误从 404 更改为 500。

有什么帮助吗？非常感谢，抱歉长post和英文不好


const express = require('express');
const morgan = require('morgan');
const exphbs = require('express-handlebars');
const path = require('path');
const flash = require('connect-flash');
const session = require('express-session');
const MySqlStore = require('express-mysql-session');
const passport = require('passport');

const { database } = require('./keys');

//Inicializaciones

const app = express();
require('./lib/passport');

//Configuraciones

app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.engine('.hbs', exphbs({
    defaultLayout: 'main',
    layoutsDir: path.join(app.get('views'), 'layouts'),
    partialsDir: path.join(app.get('views'), 'partials'),
    extname: '.hbs',
    helpers: require('./lib/handlebars')
}));
app.set('view engine', '.hbs');

//Middlewares

app.use(session({
    secret: 'carhelpmysqlsession',
    resave: 'false',
    saveUninitialized: 'false',
    store: new MySqlStore(database)
}));
app.use(flash());
app.use(morgan('dev'));
app.use(express.urlencoded({extends: false}));
app.use(express.json());
app.use(passport.initialize());
app.use(passport.session());

//Variables Globales

app.use((req, res, next) => {
    app.locals.success = req.flash('success');  
    app.locals.message = req.flash('message');
    app.locals.user = req.user; 
    next();
});

//Rutas

app.use(require('./routes/index.js'));
app.use(require('./routes/authentication.js'));
app.use(require('./routes/carhelp.js'));
app.use(require('./routes/estados.js'));



// Public
app.use(express.static(path.join(__dirname, 'public')));

//Inicializar Servidor

app.listen(app.get('port'), () => {
    console.log('Server on port', app.get('port'));
});

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

Answer 1

所以它说 syntax error。

我想看看你的清单 json 文件格式是否正确。在代码片段中，我看到缺少 { 左括号，这在您复制时可能会出现问题。您可以尝试 JSON Validator like this one or you can use this 来验证您的清单文件。

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

希望对您有所帮助。

更新：

manifest.json 应该在 static/public 文件夹中，从那里提供静态文件并将其用作 express 中的静态文件。

我的 node.js 网络应用无法识别我的 manifest.json

My node.js web app don't recognize my manifest.json

node.js

express

handlebars.js

progressive-web-apps

manifest.json

更新：