是否允许使用 manifest.json 的相对路径并将其放在根目录之外?

Is it allowed to use relative path for manifest.json and place it outside of the root?

我们正在使用如下所示的 manifest.json 文件:

 {
  "name": "Our app",
  "description": "Our app description",
  "short_name": "our-app",
  "icons": [
    {
      "src": "/content/favicons/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": 0.75
    },
    {
      "src": "/content/favicons/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": 1
    },
    {
      "src": "/content/favicons/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": 1.5
    },
    {
      "src": "/content/favicons/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": 2
    },
    {
      "src": "/content/favicons/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": 3
    },
    {
      "src": "/content/favicons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": 4
    }
  ]
}

连同它所在的图标:/content/favicons/manifest.json。所以我们这样引用它:<link rel="manifest" href="/content/favicons/manifest.json">

我对manifest.json文件做了很多研究,网上的所有内容只解释了当你的所有文件都在根文件夹中时如何处理它,这是我们不想要的。我们需要保持它的清洁,所以我们为所有与网站图标相关的东西引入了一个新文件夹。

问题是这是否允许以及 src 路径(例如 "src": "/content/favicons/android-chrome-48x48.png")是否需要是相对的或绝对。那么 src 路径 在这个设置中应该是什么?

TL; DR 相对路径和绝对路径都有效

假设您有以下文件:

  • /content/favicon/android-chrome-192x192.png
  • /content/favicon/manifest.json,其中引用了 android-chrome-192x192.png
  • /index.html,其中引用 manifest.json<link rel="manifest" href="/content/favicon/manifest.json">

那么manifest.json对应的src属性可以设置为:

  • /content/favicon/android-chrome-192x192.png(即绝对路径)。这是您可以使用 favicon compatibility test of RFG 测试的内容(完全披露:我是该网站的作者)。
  • android-chrome-192x192.png(即相对路径)。我刚刚用 Android Chrome 51 测试了这个。但是,应该再次检查这个选项,因为更多的浏览器支持网络应用程序清单。

只是为了添加一些具体信息。MDN 对 src 属性说:

If src is a relative URL, the base URL will be the URL of the manifest.

C.f。 https://developer.mozilla.org/en-US/docs/Web/Manifest/icons