如何在 manifest.json 中指定图标？答案

【问题标题】：How to specify icons in manifest.json?如何在 manifest.json 中指定图标？
【发布时间】：2016-05-19 19:11:05
【问题描述】：

如何在 manifest.json 中指定图标？似乎有些人使用数组，有些人使用字典。例如：

https://developer.chrome.com/webstore/get_started_simple
"icons": {
   "128": "icon_128.png"
},

但是在这个来源中，他们是这样使用它的：

https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android?hl=en

  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],

如果我尝试将我的网络应用程序安装为 chrome 扩展程序，并且我使用后一种格式，我会收到以下错误：

所以我想我需要使用第一种格式。但是，如果我尝试在 android 中将我的应用程序安装为渐进式网络应用程序，则似乎需要后一种格式...

【问题讨论】：

如果我理解的话，“web-apps”="chrome-apps"≠"chrome-extensions"。你想做什么？
@Teepeemm 所以我有一个网络应用程序。只是一个网站，我猜你可以说，只是一个 url，人们可以在浏览器中输入。所以我希望人们把它安装到他们家的 android 上。但我也希望它在 Chrome 网上应用店中。 developer.chrome.com/webstore/get_started_simple > 有网络应用吗？按照本教程将您现有的网络应用程序添加到 Chrome 网上应用店。根据那个链接
这和安卓有什么关系？请删除不必要的标签。
@ReazMurshed 这是关于在 android 中安装渐进式网络应用程序所需的清单语法。

标签： android web-applications google-chrome-extension manifest progressive-web-apps

【解决方案1】：

简短的回答是两者都需要。它们是两个不同的清单文件，用于不同的目的并且存在于不同的地方。

对于 Chrome 网上应用店，您将在计算机上按照getting started tutorial 本地创建清单。该清单和图标图像将被添加到一个 zip 文件并上传到商店。

"icons": {
  "128": "icon_128.png"
}

对于installable web apps，您必须创建一个清单文件，将其与图片一起上传到您的网站，然后更新您的 HTML 页面以链接到您网站上的清单。

  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]

【讨论】：

是否允许将 manifest.json 放在不在根目录下？我们已经将 manifest.json 和图标放在 content/icons/.. 中，那么图标 src 会是什么？
src 相对于manifest.json 所在的目录。因此，如果您在 img 中有 img foo.png，那么您将使用 "src": "img/foo.png"。