【发布时间】：2020-09-25 17:30:41
【问题描述】：
我正在尝试构建 PWA，并在此过程中向我的网页添加了一个清单文件，但我在 Chrome 开发工具的“应用程序”选项卡中收到“未检测到清单”。
我在这方面看到了其他线程，并尝试了重启、清除缓存等解决方案，但无济于事。
我尝试了一些其他工具，例如 https://manifest-validator.appspot.com/，但它们似乎没有在清单文件中显示任何问题。
您也可以尝试https://beegle.app/apporter-book-help 的网站，当您“查看源代码”时，您会发现在标题中添加了清单文件，并且清单文件链接也可以正常工作。
这是它的添加方式
<link rel="manifest" href="/manifest.json">
文件如下所示：
{
"name": "Beegle Apporter",
"short_name": "Apporter",
"icons": [{
"src": "/beegle-logo-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "/beegle-logo-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "/beegle-logo-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "/beegle-logo-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/beegle-logo-256x256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "/beegle-logo-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"start_url": "/apporter-book-help",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
对可能出现的问题有任何建议和想法吗？
【问题讨论】：
-
你能分享你的项目结构吗？清单文件应该在您的应用程序的根目录下，如果不是，那么您必须相应地在清单文件中使用“start_url”：“./”和“范围”：“/”。
-
感谢 Vinod 的回复。从我给出的清单中可以看出，它位于根目录。
-
Lighthouse 和您链接到的清单验证器似乎能够很好地找到和解析清单。
-
是的，这就是为什么我无法弄清楚出了什么问题。 Chrome 开发工具无法检测到它。