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

这是发布在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"
  }
]

Answer 2

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

当前警告消息为：

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

因此，您可能需要为PNG示例添加以下声明：

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

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

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

2 个答案: