我的本地主机服务器运行在 root
文件夹和我的 webapp
文件夹位于此 root
内文件夹。
http://127.0.0.1:8887/ -> root
http://127.0.0.1:8887/webapp -> root/webapp
webapp
包含它的 index.html
链接到 manifest.json
像这样在同一个文件夹中的文件。
<link rel="manifest" href="./manifest.json">
webapp
的 list 文件在此设置中,Chrome 未检测到。manifest.json
仅当 localhost 服务器在 webapp
启动时才被检测到文件夹。http://127.0.0.1:8887/ ->
webapp
我希望它以其他方式工作,怎么做?
mainfest.json
{
"name": "Web app",
"short_name": "Web app",
"icons": [{
"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"
}],
"start_url": "/webapp/",
"scope":"/webapp/",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
最佳答案
1) HTTPS is required让 PWA 发挥作用。此外,拥有有效证书将避免证书验证问题。您可以使用以下命令为本地生成一个。
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
2) 当 index.html 和 manifest.json 都在同一个文件中时,你可以不用“.”链接到它。像下面。有时可能是由于 Web 服务器在解决路径方面的差异。是的,理想情况下“。”不过应该是指当前文件夹。但是值得一试让您的本地服务器正常工作。
3) 不确定您使用的是什么 Web 服务器。你最终会需要一个支持服务 worker 的人(有些人像 Angular 中的 ng serve 还不支持服务 worker )。 http-server是个不错的选择。
安装 ->
npm install http-server -g
在您的构建文件夹中运行此命令 ->
http-server -o -i 172.22.49.205 -p 8080 -S
3) 如果您转到 Chrome 开发人员工具 -> 应用程序 -> list ,并且显示“未检测到 list ”,那么您可以确定 list 如果没有出现,并且上述方法之一可能有助于修复它。
关于google-chrome - 未检测到子目录中 Web 应用程序的 manifest.json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49571084/