google-chrome - 未检测到子目录中 Web 应用程序的 manifest.json

Question

我的本地主机服务器运行在 root文件夹和我的 webapp文件夹位于此 root 内文件夹。

http://127.0.0.1:8887/ -> root
http://127.0.0.1:8887/webapp -> root/webappwebapp包含它的 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"
  }

Answer 1

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 如果没有出现，并且上述方法之一可能有助于修复它。