带有 Web App Manifest 的 Android 9 上的自适应图标答案

【问题标题】：Adaptive icons on Android 9 with Web App Manifest带有 Web App Manifest 的 Android 9 上的自适应图标
【发布时间】：2019-08-26 17:31:34
【问题描述】：

我正在为我的 PWA 设置 Web 应用清单。但是 Android 的图标会被压缩成一个圆形图标。

我尝试了普通图标，没有背景，考虑safe-zone。

Images of icons installed on my Android

遗憾的是，我没有找到任何文档，而且这个图标真的让我很烦。

已编辑：

"name": "PWA-Test",
"short_name": "PWA-Test",
"display": "standalone",
"scope": "/",
"start_url": "/", 
"icons": [
    {
        "src": "/assets/android-chrome-36x36.png",
        "sizes": "36x36",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-48x48.png",
        "sizes": "48x48",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
],
"theme_color": "#5c3552",
"background_color": "#5c3552"

编辑 2：当我只使用圆形图标时，它似乎可以工作。但我猜每个 Android 版本的 UI 都不一样。

通过制作圆形图标解决了这个问题。现在的问题是，桌面上的图标现在也是圆形的。

【问题讨论】：

您是如何定义 Web 应用清单中的图标的？你能在你的问题中复制它吗？有关“添加到主屏幕”逻辑的更多详细信息：dev.to/paco_ita/install-a-pwa-on-the-user-s-device-step-2-27pa
您是否尝试将安全区域（即只有图标的内圈是实心的，其余部分是透明的）和实心背景（即您的白色绘图出现在紫色背景上）结合起来？您的 Android 屏幕截图中的第二个图标让我觉得您在测试安全区时放弃了紫色背景。
@Francesco 将我的清单添加到帖子中。
@philippe_b 都试过了。 2 次带安全区（实心背景和透明）和 2 次不带安全区（实心背景和透明）。
我在您的问题中注意到您的“编辑 2”，但不记得当我第一次阅读它时它是否已经在这里。这意味着您找到了适用于 Android 的解决方案，但现在您希望为 Android 和桌面提供不同的图标，对吗？如果是这样，恐怕目前还没有解决方案。

标签： android google-chrome icons favicon web-manifest

【解决方案1】：

我在 Android 设备上运行我的 PWA，我不需要对图标进行任何特殊调整。

这是我的网络清单的一部分：

"icons": [
     // Other sizes
    {
      "src": "/images/icons-144.png",
      "type": "image/png",
      "sizes": "144x144"
    },    
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]

对于 Chrome，它至少需要 192x192 和 512x512 两种图标尺寸：

包括一个 192x192 像素的图标和一个 512x512 像素的图标。 Chrome 会自动缩放设备的图标。如果您希望缩放自己的图标并调整它们以实现像素完美，请以 48dp 为增量提供图标。

在 Chrome 71 或更高版本中生成的 WebAPK 将在初始屏幕上显示一个较大的图标。无需任何操作，只要提供推荐的图标即可。

【讨论】：

将我的清单添加到帖子中。我已经有各种尺寸了。

【解决方案2】：

首先，您需要创建一个有 2 层的图标。

您可以使用此实用程序：https://maskable.app/editor

之后，您需要在 manifest.json 中设置可屏蔽的目的

{
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "any maskable" // <-- New property value `"maskable"`
    }
  ]
  …
}

本文中的更多信息：https://web.dev/maskable-icon/

【讨论】：