可遮罩图标：适用于您的 PWA 的 Android 自适应图标

您已经创建了一个渐进式 Web 应用程序 (PWA)，设计了一个图标来代表它，现在您将其安装到您的 Android 主屏幕上。

但是，如果您拥有最新的 Android 手机，您的图标将像这样显示

发生了什么事？ 好吧，Android Oreo 引入了 自适应图标，这是一种新的图标格式，它对主屏幕上的所有图标强制使用相同的形状。 不符合新格式的图标将获得白色背景。

但是，有一个名为 可遮罩图标 的新 Web 功能即将在 Firefox 预览版和其他 Web 浏览器中推出。 这种新的图标格式将让您的 PWA 在 Android 上拥有自己的自适应图标。

我在 Mozilla 工作，并且在 Firefox 预览版 中实现了对可遮罩图标的支持。 我将向您展示如何将它们添加到您自己的适用于 Android 的 PWA。

什么是可遮罩图标和自适应图标？

在几年前，Android 应用程序图标是自由形式的，可以是任何形状。 这意味着 Web 应用程序也可以在固定到主屏幕时重用相同的透明图标。

但是，三星等制造商希望使设备上的所有图标都具有相同的形状，以保持一致性。 一些制造商甚至想要不同的形状。 为了解决制造商和设备提出的各种要求，Android 引入了“自适应图标”。 您提供一个在边缘周围具有额外空间的图像，Android 将将其裁剪成正确的形状。

但是 Web 应用程序旨在适用于任何平台，因此它们没有用于创建这些特殊 Android 图标的 API。 相反，图标会被压缩成像这样的白色方框。

瞧，去年 9 月，一个全新的 API 降临到我们身上，并被添加到 W3C 规范中。 可遮罩图标 允许 Web 开发人员指定一个将被裁剪的全出血图标。 它与平台无关，因此 Windows 可以将其用于磁贴，iOS 可以将其用于图标。

如何创建可遮罩图标

由于可遮罩图标格式旨在与任何平台一起使用，因此其大小和比例与 Android 自适应图标的大小和比例不同。 这意味着您不能重用相同的资产。

可遮罩图标可以是任何大小，您可以继续使用与普通透明图标相同的大小。 但是，在设计图标时，请确保重要信息位于半径等于图像大小 40% 的“安全区域”圆圈内。

保证此区域内的所有像素都可见。 区域外的像素可能会根据图标形状和平台被裁剪掉。

警告：如果您已经拥有 Android 应用程序，请避免将图标从 Android 应用程序复制粘贴到 Web 应用程序。 比例不同，因此您的图标看起来太小。

将图标添加到您的 Web 应用程序清单

创建图标后，您可以像其他图标资产一样，在您的 Web 应用程序清单 中添加一个条目。 Web 应用程序清单在一个 JSON 文件中提供有关您的 Web 应用程序的信息，并且包含一个 "icons" 数组。

{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

可遮罩图标使用一个特殊的新键 "purpose" 来指示它们应该与图标遮罩一起使用。 具有透明背景的图标的默认 "purpose" 为 "any"，并且图标可以通过用空格分隔每个选项来用于多种用途。

"purpose": "maskable any"

预览您的图标

您想看看自己的可遮罩图标会是什么样子吗？ 我创建了一个工具 Maskable.app 来帮助您评估图标在不同形状中的外观。

该应用程序允许您在 Android 设备上找到的各种形状中预览您的图标。 我希望这个工具能帮助您为您的渐进式 Web 应用程序创建独特的图标。

对结果感到满意后，您可以开始测试您的应用程序。 Firefox 预览版夜间版 和 Chrome Canary 都支持可遮罩图标。 您可以使用它们来查看您的 PWA 的外观。

像 PWACompat 这样的工具也支持可遮罩图标。 您可以根据新的可遮罩图标自动为 iOS 和其他设备生成图标！

是时候构建您自己的图标了

如果您想要更多地控制 PWA 图标在 Android 上的显示方式，可遮罩图标是最佳选择。 使用可遮罩图标，您可以自定义图标从边缘到边缘的显示方式。 希望本文能帮助您开始创建您的第一个可遮罩图标。

---

图标来源

• https://notwoods.github.io/color-breakdown/
• https://notwoods.github.io/insightful-energy/
• https://notwoods.github.io/big-island-buses/
• https://proxx.app/
• https://jakearchibald.github.io/svgomg/