Web manifest应包含192px图标

贡献 功能
1

看起来 Discourse 在 Web 清单 JSON 文件中提供了一个 512px 的图标。在站点设置的“品牌”部分，只有一个清单图标字段，这表明上传的图片将被缩放到 512×512 像素。

{
   ...
   "icons":[
      {
         "src":"https://community.toph.co/uploads/default/optimized/2X/5/5b9de7676657b71384fb77c662616d73765f0293_2_512x512.png",
         "sizes":"512x512",
         "type":"image/png"
      },
      {
         "src":"https://community.toph.co/uploads/default/optimized/2X/5/5b9de7676657b71384fb77c662616d73765f0293_2_512x512.png",
         "sizes":"512x512",
         "type":"image/png",
         "purpose":"maskable"
      }
   ],
   ...
}

然而，根据 Add a web app manifest  |  Articles  |  web.dev 的说法：

对于 Chrome，您必须至少提供一个 192x192 像素的图标和一个 512x512 像素的图标。

我注意到在 Firefox 上也是如此（至少在 LineageOS 设备上）。效果如下所示：

photo_2021-04-15_23-25-11
photo_2021-04-15_23-25-11453×605 17.6 KB

请注意 Toph 和 Drafts 的两个图标？它们都提供了 192px 的图标（以及其他尺寸）。此前，Toph 和 Drafts 有多个图标，但没有 192px 的图标。而且，它们看起来与 Community 的图标相似（即白色区域周围有深色填充）。此截图中的 Community 应用是一个 Discourse 实例。

2

这似乎是 LineageOS 的问题，或者可能是您的浏览器版本问题。

我在 Android（版本 10）的 Chrome（版本 89）和 Firefox（版本 87）中测试过，显示正常：

Screenshot from 2021-04-15 23-00-27
Screenshot from 2021-04-15 23-00-27452×236 56.8 KB

也在 Safari 中测试过：

unnamed
unnamed1125×2001 446 KB

根据我在代码中看到的内容，您说得对，唯一的尺寸是 512 像素。由于设备、浏览器众多，且每种都有推荐的尺寸，我想 Discourse 很难全部覆盖。不过，512 像素对大多数情况来说似乎都能正常工作。

4 个赞
3

我在手机上的 Firefox 和 Chrome 中都以 PWA 形式安装了 Meta，512px 图标对我来说完全正常。

我们可以添加一个任务来调整 512px 图标的尺寸，但如果这在我们官方支持的平台上没有任何区别，我认为这没有太大价值。

你能在 Meta / Android Chrome 上复现这个问题吗？

4 个赞