可掩盖的图标：PWA的Android自适应图标

Progressive Web App (PWA) 的 Android 自适应图标：Maskable Icons 指南

您已创建了一个渐进式 Web 应用 (PWA)，并设计了相应的图标，现在正将其安装到 Android 主屏幕上。但是，如果您使用的是较新的 Android 手机，您的图标可能会显示如下：

这是怎么回事呢？Android Oreo 引入了自适应图标，这是一种新的图标格式，它强制所有主屏幕图标采用相同的形状。不符合新格式的图标将显示为白色背景。

然而，一项名为 maskable icons 的新 Web 功能即将在 Firefox Preview 和其他 Web 浏览器中推出。这种新的图标格式将允许您的 PWA 在 Android 上拥有自己的自适应图标。

我在 Mozilla 工作，并在 Firefox Preview 中实现了对 maskable icons 的支持。我将向您展示如何将它们添加到您自己的 Android PWA 中。

maskable icons 和自适应图标是什么？

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

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

但是 Web 应用的设计目的是在任何平台上运行，因此它们没有 API 来创建这些特殊的 Android 图标。相反，图标会被挤压到这样的白色框中：

令人欣喜的是，去年九月一个全新的 API 出现了，并被添加到 W3C 规范中。Maskable icons 允许 Web 开发人员指定一个将被裁剪的全出血图标。它是平台无关的，因此 Windows 可以将其用于磁贴，iOS 可以将其用于图标。

如何创建 maskable icons

由于 maskable icon 格式的设计目的是与任何平台一起工作，因此其大小和比例与 Android 的自适应图标的大小和比例不同。这意味着您不能重用相同的资源。

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

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

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

将图标添加到 Web 应用清单

创建图标后，您可以向 Web 应用清单添加一个条目，类似于其他图标资源。Web 应用清单在一个 JSON 文件中提供有关 Web 应用的信息，并包含一个“icons”数组。

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

Maskable icons 使用一个特殊的新键“purpose”来指示它们打算与图标蒙版一起使用。具有透明背景的图标的默认“purpose”为“any”，并且可以通过空格分隔每个选项来为图标使用多个用途。

<code>"purpose": "maskable any"</code>

预览您的图标

您想看看您自己的 maskable icons 看起来像什么吗？我创建了一个工具 Maskable.app 来帮助您评估图标在不同形状下的外观。

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

[查看应用] [查看源代码]

一旦您对结果满意，就可以开始测试您的应用了。Firefox Preview Nightly 和 Chrome Canary 都支持 maskable icons。您可以使用它们来查看您的 PWA 的外观。

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

开始创建您自己的图标吧

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

图标来源：

• https://www.php.cn/link/258b55f3d6bc1cafb846ac3bbe5bc643
• https://www.php.cn/link/55a85e71b468ef171a7d4509b3f35f36
• https://www.php.cn/link/284c1ffedc349416c5a95b82a0f6a6d7
• https://www.php.cn/link/e5f6b927ce20f43fb7d5247109be554a
• https://www.php.cn/link/41be696537187bb3b209c20dafeb2a81

以上是可掩盖的图标：PWA的Android自适应图标的详细内容。更多信息请关注PHP中文网其他相关文章！