渐进式Web应用程序“清单中不包含合适的图标”

Question

我正在开发一个动态渐进式Web应用程序，因此图标需要能够更改。为此，我在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/"
}

然而，当它加载时，我遇到了错误：

清单不包含合适的图标-PNG格式至少需要144px大小属性必须设置，如果设置，则目的属性必须包括“any”

我的两个图标都是PNG格式，并且大小与我在清单中设置的确切大小相同。当我访问我的S3 URL并下载这些图像时，它们是PNG格式并具有正确的尺寸。此外，看起来它们正在正常加载，这是DevTools窗口的截图。

使用URL作为src而不是直接使用文件是否存在问题？如果有问题，是否有其他选择来指向远程托管的不在我的代码目录中的图像？

- A. Hasemeyer

---

添加 "type" : "image/png" 可以解决这个问题。 - A. Hasemeyer

Answer 1

这是一个比较老的问题。简单来说，你的manifest.js文件没有声明默认图标尺寸为144x144，且格式为PNG、SVG或WebP。同时，还要记得新的purpose属性。

当前的警告信息会是：

“未提供的图标至少应该是 144 像素的正方形，格式为 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"

- dankilev

Answer 2

这里是发布在MDN Web文档上的示例

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

- Michael Nelles