Question

所以我正在为我的网络应用设置一个清单文件，并且需要一个有效的图标才能工作。遵循MDN结构，我为我的应用程序提供了多个图标。到目前为止，这是我的清单：

{
  "name": "Tradesolution EPD",
  "short_name": "EPD portal",
  "theme_color": "#007AB5",
  "display": "standalone",
  "start_url": "http://localhost:1384/#/",
  "icons": [
    {
      "src": "content/images/favicon.ico",
      "sizes": "144x144"
    },
    {
      "src": "content/images/favicon.ico",
      "sizes": "16x16"
    },
    {
      "src": "content/images/ts-logo.svg",
      "sizes": "72x72"
    },
    {
      "src": "content/images/ts-logo.svg",
      "sizes": "512x512"
    }
  ],
  "background_color": "#007AB5", 
  "orientation": "portrait" 
}

我在控制台中尝试添加清单时出现以下错误：

Site cannot be installed: 
icon downloaded from the manifest was empty or corrupted

这是我对devtools的清晰概述。

根据W3C标准清单validator

，我的manifest.json文件也有效

更新：所以我用一个带有以下参数的新图像更新了我的清单：

{
  "src": "content/images/pakningssammensetninger/new-B_diagram.png",
  "sizes": "192x192",
  "type": "image/png"
}

我在控制台中收到相同的错误消息：

Site cannot be installed: icon downloaded from the manifest was empty or corrupted

Answer 1

要在Chrome中安装PWA，它必须符合set of criteria。其中之一是主图标采用PNG格式。

一个192x192 png图标（图标声明必须包含mime类型的图像/ png）

Answer 2

浏览器似乎无法正确解析图像的路径。

请注意，当您使用相对路径（例如您的示例content/images/ts-logo.svg）时，该路径是相对于清单的。

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

来源：https://developer.mozilla.org/en-US/docs/Web/Manifest/icons

因此，如果您的清单是在/content/site.webmanifest投放的，则该图标应该从/content/content/images/ts-logo.svg投放。

因此，请更正路径，或将其设置为绝对路径，例如：/content/images/ts-logo.svg（请注意开头的斜杠）。

Answer 3

您可以参考此thread。基于此documentation，在放置图标的src路径时，它必须引用根目录。您应该通过在开头删除/并再次编译来更改路径。

更改"src": "/android-chrome-192x192.png", to "src": "android-chrome-192x192.png",（开头没有/）。

希望这有帮助！

从清单下载的图标为空或已损坏

3 个答案: