渐进式 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/"
}

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

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 而不是直接使用文件有问题吗？如果是这样，他们是否有任何替代方法可以指向不在我的代码目录中并远程托管的图像？

Answer 1

这是一个比较老的问题。简而言之，您的manifest.js文件没有144x144PNG、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”