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

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

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

manifest.json 仅当本地主机服务器在 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 都在同一个文件中时，您可以 link 不带“.”。像下面。有时可能是由于 Web 服务器在解决路径的方式上存在差异。是的，理想情况下是“。”不过应该参考当前文件夹。但是让您的本地服务器正常工作值得一试。

3) 不确定您使用的是什么网络服务器。你最终会需要一个支持 service worker 的（有些像 ng serve in Angular 还不支持 service worker）。 http-server 是个不错的选择。

安装 -> npm install http-server -g

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

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

3) 如果您转到 Chrome 开发人员工具 -> 应用程序 -> 清单，如果它显示 "No Manifest Detected"，那么您可以确定清单是否出现，并且上述之一可能帮助修复它。

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

manifest.json of web app in sub directory not detected

google-chrome

web

progressive-web-apps

manifest.json