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

Question

我的本地服务器运行在该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">

webappChrome在此设置中未检测到的清单文件。

manifest.json仅在webapp文件夹启动localhost服务器时，才会检测到。

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) PWA 工作需要 HTTPS 。拥有有效的证书还可以避免证书验证问题。您可以使用以下命令为本地生成一个。

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

2）当index.html和manifest.json都在同一个文件中时，您可以链接到它，而无需“。” 像下面这样。有时，由于 Web 服务器解决路径的方式不同，可能会出现这种情况。是的，理想情况下“。” 不过应该引用当前文件夹。但让您的本地服务器正常工作值得一试。

3) 不确定您使用的是什么网络服务器。您最终需要一个支持 Service Worker 的服务（Angular 中的一些服务尚不支持 Service Worker）。http-server是一个不错的选择。

安装-> npm install http-server -g

在构建文件夹中运行此命令 ->

http-server -o -i 172.22.49.205 -p 8080 -S

3) 如果您转到 Chrome 开发者工具 -> 应用程序 -> 清单，并且显示“未检测到清单”，那么您可以确定清单是否未出现，并且上述方法之一可能有助于修复该问题。