未检测到子目录中 Web 应用的 manifest.json答案

【问题标题】：manifest.json of web app in sub directory not detected未检测到子目录中 Web 应用的 manifest.json
【发布时间】：2018-03-30 08:33:12
【问题描述】：

我的 localhost 服务器在 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">

在此设置中，Chrome 未检测到 webapp 的清单文件。

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

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"
  }

【问题讨论】：

你能改变 start_url 直到索引文件 - /webapp/index.html 并尝试。我可以看到developer.mozilla.org/en-US/docs/Web/Manifest的这一部分
@SumeetPatil 显然，当我在 Github Pages 上托管代码并在那里进行测试时，它工作得很好。唯一不同的是，在 GH Pages 中有 HTTPS。不确定这是否与它有关，但 Chrome 在本地服务器上似乎无法识别子目录中的清单文件。

标签： google-chrome web progressive-web-apps manifest.json

【解决方案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) 不确定您使用的是什么网络服务器。你最终会需要一个支持服务工作者（Angular 中的一些像 ng serve 还不支持服务工作者）。 http-server 是一个不错的选择。

安装 -> npm install http-server -g

在你的构建文件夹中运行这个命令 ->

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

3) 如果您转到 Chrome 开发人员工具 -> 应用程序 -> 清单，并且如果它显示“未检测到清单”，那么您可以确定清单（如果没有出现）并且上述之一可能有助于修复它。

【讨论】：