是否允许使用manifest.json的相对路径并将其放在root之外？

Question

我们正在使用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文件做了很多研究,网上的所有内容只解释了当你的所有文件都在根文件夹中时如何处理它,这是我们不想要的.我们需要保持清洁,因此我们为所有与favicon相关的东西引入了一个新文件夹.

问题是如果这是允许的,并且src路径(例如 "src": "/content/favicons/android-chrome-48x48.png")需要是相对的还是绝对的.那么src路径在这个设置中应该是什么？

Answer 1

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

然后相应的src属性manifest.json可以设置为:

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

Answer 2

只是为了添加一些具体信息，MDN 关于该src属性的说明：

如果 src 是相对 URL，则基本 URL 将是清单的 URL。

参见https://developer.mozilla.org/en-US/docs/Web/Manifest/icons