此页面由 Cloud Translation API 翻译。

在 PWA 中使用可遮盖式图标支持自适应图标

Thomas Steiner

Tiger Oakes

如果您在新近的 Android 手机上安装了渐进式 Web 应用 (PWA)，您可能会注意到应用的图标背景为白色。Android 8.0 引入了自适应图标，可在各种设备上以各种形状显示应用图标模型。未采用此格式的图标的背景为白色。

</ph>

在 Android 设备上，透明的 PWA 图标显示在白色圆圈内。

可遮罩的图标是 Chrome 和 Firefox 中的一种新图标格式，渐进式 Web 应用使用自适应图标，让您更好地掌控自己的图标的外观。

</ph>

可遮盖的图标会改为覆盖整个圆圈。

我当前的图标准备好了吗？

由于可遮罩图标需要支持各种形状，因此您需要提供带有一定内边距的不透明图片，浏览器可将其裁剪为根据任何浏览器或平台调整形状和尺寸

</ph>

特定于平台的不同图标形状。

可遮罩图标规范包括一个标准化 “最小安全区”所有平台都遵循的标准本课程的图标（例如徽标）必须位于半径等于图标宽度的 40% 的图标。外侧 10% 的边缘可能在某些平台上遭到剪裁

您可以使用 Chrome 查看图标的哪些部分位于安全区域内开发者工具。打开渐进式 Web 应用后，启动开发者工具并前往 Application 面板。在图标部分，您可以选择 仅显示可遮盖式图标的最小安全区域。这样会修剪图标只有安全区域可见。如果您的徽标在此安全区域内可见，您的图标已准备就绪

</ph>

“Applications”面板，显示剪裁后的 PWA 图标。

如需使用各种 Android 形状测试可遮盖式图标，请使用 Tiger Oakes 的 Maskable.app。只需打开一个图标，即可借助 Maskable.app 来尝试各种形状和尺寸，并与您的团队分享预览效果。

如何采用可遮罩的图标？

要根据现有图标创建可遮罩的图标，您可以使用 Maskable.app Editor。上传图标，调整然后导出图片

</ph>

在 Maskable.app 编辑器中创建图标

。

创建可遮盖图标并在开发者工具中对其进行测试后，您需要更新 Web 应用清单指向新资源。通过 Web 应用清单以 JSON 文件提供 Web 应用的相关信息，以及包含 icons 数组。

purpose 字段用于告知浏览器应如何使用您的图标。默认情况下图标的用途为 "any"。在 Android 中，这些图标在白色上调整尺寸背景。

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

如需将图标设为可遮盖，请将其 purpose 值设置为 "maskable"，以指明应该与图标遮罩一起使用。这会移除白色背景可让您更好地控制图标的外观。您还可以指定多个使用空格分隔（例如 "any maskable"），可遮盖式图标，这样可在其他设备上不显示蒙版使用。

致谢

此页面由 Joe Medley 审核。