Progressive Web App“清单不包含合适的图标”答案

【问题标题】：Progressive Web App "Manifest does not contain a suitable icon"Progressive Web App“清单不包含合适的图标”
【发布时间】：2019-11-06 09:12:23
【问题描述】：

我正在构建一个动态渐进式网络应用程序。因此，图标必须能够更改。为此，我在 manifest.json 文件中指向了一个公共 S3 存储桶。

看起来是这样的：

{
"name": "Tenant 3",
"short_name": "Tenant 3",
"description": "Tenant 3",
"manifest_version": "0.11",
"icons": [{
        "src": "https://s3.amazonaws.com/myBucket/smallIcon",
        "sizes": "192x192"
    }, {
        "src": "https://s3.amazonaws.com/myBucket/largeIcon",
        "sizes": "512x512"
    }
],
"display": "standalone",
"start_url": "http://localhost:60003/",
"scope": "http://localhost:60003/"
}

但是，当它加载时，我得到了错误：

Manifest does not contain a suitable icon - PNG format of at least 144px is required, the sizes attribute must be set, and the purpose attribute, if set, must include "any"

我的两个图标都是 PNG 并且是我在清单中设置的确切尺寸，当我转到我的 S3 URL 并下载 PNG 和正确尺寸的图像时。而且看起来它们加载正常，这是 DevTools 窗口的屏幕截图。

使用 URL 作为 src 而不是直接作为文件有问题吗？如果是这样，它们是否有任何替代方法可以指向不在我的代码目录中并远程托管的图像？

【问题讨论】：

添加 "type" : "image/png" 解决了这个问题。

标签： progressive-web-apps manifest.json

【解决方案1】：

这是一个比较老的问题。简而言之，您的 manifest.js 文件没有声明默认图标大小为 PNG、SVG 或 WebP 格式的 144x144。另外，请记住新的purpose 属性。

当前的警告信息是：

“未提供的图标至少为 144px 正方形，采用 PNG、SVG 或 WebP 格式。”。

因此，您可能希望对 PNG 示例进行以下声明：

{
    "src": "/relative-path-to-icon-file-with-dimensions-144x144.png",
    "sizes": "144x144",
    "type": "image/png",
    "purpose": "any"
}

对于 SVG 或 WebP，将类型更改为“image/svg”或“image/webp”

【讨论】：

【解决方案2】：

这是MDN web docs上发布的示例

"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
]

【讨论】：