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（即绝对路径）。您可以使用favicon compatibility test of RFG进行测试（完全披露：我是本网站的作者）。
android-chrome-192x192.png（即相对路径）。我刚刚使用Android Chrome 51对此进行了测试。但是，应该再次检查此选项，因为更多浏览器支持网络应用清单。

Answer 2

只需添加一些特定的信息，MDN就会说说src属性：

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

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

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

2 个答案: