progressive-web-apps - 渐进式 Web 应用程序 "Manifest does not contain a suitable icon"

Question

我正在构建一个动态渐进式网络应用程序。因此，图标必须能够更改。为此，我在 manifest.json 文件中指向了一个公共(public) 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，并且是我在 list 中设置的确切尺寸，当我转到我的 S3 URL 并下载 PNG 和正确尺寸的图像时。而且看起来它们加载得很好，这是 DevTools 窗口的屏幕截图。



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

Answer 1

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

"Not supplied icon is at least 144px square in PNG, SVG or WebP format.".

因此，您可能希望对 PNG 示例具有以下声明:

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

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