PWA“清单不包含合适的图标”

Question

我正在构建一个渐进式Web应用程序。 Chrome指出它存在图标问题：“清单不包括合适的图标”和“未提供的图标至少为144像素”。

我有图标，它们在我的手机上可以工作（因此至少可以在Android上安装）。

我有几个不同的图标尺寸，包括高达512像素。

我已经尝试预缓存这些图标，但似乎没有帮助。

这是我的清单摘录：

{
  "src": "images/icons/icon-96x96.png",
  "sizes": "144x144",
  "type": "image/png",
  "purpose": "maskable"
},

错误截图

- Robbie Wadley

Answer 1

"purpose"应为"任意"或"可屏蔽的任意"

只有"可屏蔽的"将无法像常规图标一样被检测到

- Robbie Wadley

---

这对我没用。错误信息与没有任何“目的”字段的情况相同。 - fathergorry

我已将其设置为任意。但对我来说仍然无效。 - ajparag

我使用了"purpose":"maskable"，但我不得不将其添加到192x192和512x512图标中，以使Lighthouse感到满意。 - Vincent

Answer 2

正如@pakut2在https://dev59.com/RlIH5IYBdhLWcg3wXMy2#65618862中所说，我使用了这个方法后不再有警告。

"icons": [
    {
      "src": "assets/icons/favicon-16x16.png",
      "sizes": "16x16",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/icons/favicon-180x180-apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "assets/icons/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "assets/icons/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]

- bilelz

Answer 3

您需要包含至少2个图像，其中一个必须是192x192像素，另一个必须是512x512像素。

- pakut2

---

你能提供一下来源吗？那很具体，肯定要在某个地方有记录... - Zack Biernat

将“purpose”：“maskable”属性添加到两个图像中对我有用。 - Vegeta ZA

Answer 4

我曾经遇到过同样的问题，并通过使用“any”来解决了144像素图片的问题。

虽然您可以指定多个以空格分隔的用途，例如“any maskable”，但在实践中，您不应该这样做。将“maskable”图标用作“any”图标是次优的，因为图标将按原样使用，导致多余的填充并使核心图标内容变小。理想情况下，“any”用途的图标应具有透明区域和无额外填充，就像您网站的收藏夹图标一样，因为浏览器不会为它们添加此类内容。

更多信息请参见web.dev

- Ezekias BOKOVE

---

我同意你的观点，当开发者工具中的清单文件指出图标的“purpose”必须包含“any”时，我也感到惊讶。但是，当你这样做时，它也会警告你这不是最佳解决方案。这种自相矛盾的情况很尴尬。（Chrome v99） - Aniruddha