在 index.html 不在根目录中时引用 manifest.json答案

【问题标题】：Referring to manifest.json while index.html is not inside root directory在 index.html 不在根目录中时引用 manifest.json
【发布时间】：2021-08-16 10:34:54
【问题描述】：

我正在尝试创建和注册 manifest.json 和 service-worker.js 文件，以便我们的网站成为 PWA。

问题是Chrome没有收到任何manifest.json文件，而是回复Manifest: Line: 1, column: 1, Syntax error.

关于上述文件，我们的应用程序结构如下所示（index.html 嵌套在 public/ 目录中）：

public/
    - index.html
    - favicon.ico
manifest.json
...

在 index.html 中，我通过输入相对于根目录的路径来引用 manifest.json：

<link rel="manifest" href="/manifest.json"/>

mainfest.json 看起来像这样：

{
    "name": "Who Knows - Die Quizapp zum Testen Deiner Menschenkenntnis",
    "short_name": "Who Knows",
    "description": "Testen Sie Ihre Menschenkenntnis",
    "lang": "de",
    "start_url": "/",
    "scope": ".",
    "display": "standalone",
    "theme_color": "#BF0436",
    "background_color": "#FFFFFF",
    "icons": [
      {
        "src": "images-ressources/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "images-ressources/icon-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
      },
      {
        "src": "images-ressources/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
      },
      {
        "src": "images-ressources/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ]
}

当我将manifest.json 文件移动到public/ 时，一切正常（图标路径除外）。这就是为什么我猜我有路径问题。我宁愿不更改目录结构，因为它是一个有几个人在其中工作的项目。

【问题讨论】：

我最好的猜测是您的所有文件都应该在 public 中，而我的图标不起作用，因为您在 images-ressources 中有错字（双 s）。
您确定您的清单文件实际上是由您的网络服务器提供的吗？您可以从浏览器手动获取它吗？另外，请确保start_url 在scope 内，否则找不到起始页。

标签： html progressive-web-apps service-worker manifest.json

【解决方案1】：

如果您的网站是 https://yourdomain/public/ 并且您的服务人员和清单位于根目录，而不是 /public，那么是的，您有问题。如果 public 被映射为 Web 服务器中的默认文件夹，则将清单和 service worker 放在 /public 文件夹中。

【讨论】：