Progressive Web App (PWA) 的 Android 自適應(yīng)圖標(biāo)：Maskable Icons 指南

您已創(chuàng)建了一個(gè)漸進(jìn)式 Web 應(yīng)用 (PWA)，并設(shè)計(jì)了相應(yīng)的圖標(biāo)，現(xiàn)在正將其安裝到 Android 主屏幕上。但是，如果您使用的是較新的 Android 手機(jī)，您的圖標(biāo)可能會(huì)顯示如下：

這是怎么回事呢？Android Oreo 引入了自適應(yīng)圖標(biāo)，這是一種新的圖標(biāo)格式，它強(qiáng)制所有主屏幕圖標(biāo)采用相同的形狀。不符合新格式的圖標(biāo)將顯示為白色背景。

然而，一項(xiàng)名為 maskable icons 的新 Web 功能即將在 Firefox Preview 和其他 Web 瀏覽器中推出。這種新的圖標(biāo)格式將允許您的 PWA 在 Android 上擁有自己的自適應(yīng)圖標(biāo)。

我在 Mozilla 工作，并在 Firefox Preview 中實(shí)現(xiàn)了對(duì) maskable icons 的支持。我將向您展示如何將它們添加到您自己的 Android PWA 中。

maskable icons 和自適應(yīng)圖標(biāo)是什么？

幾年前，Android 應(yīng)用圖標(biāo)是自由形式的，可以是任何形狀。這意味著 Web 應(yīng)用在固定到主屏幕時(shí)也可以重用相同的透明圖標(biāo)。

但是，像三星這樣的制造商希望使設(shè)備上的所有圖標(biāo)都具有相同的形狀，以保持一致性。一些制造商甚至希望使用不同的形狀。為了應(yīng)對(duì)制造商和設(shè)備對(duì)各種要求，Android 引入了“自適應(yīng)圖標(biāo)”。您提供一個(gè)邊緣周?chē)蓄~外空間的圖像，Android 將將其裁剪成正確的形狀。

但是 Web 應(yīng)用的設(shè)計(jì)目的是在任何平臺(tái)上運(yùn)行，因此它們沒(méi)有 API 來(lái)創(chuàng)建這些特殊的 Android 圖標(biāo)。相反，圖標(biāo)會(huì)被擠壓到這樣的白色框中：

令人欣喜的是，去年九月一個(gè)全新的 API 出現(xiàn)了，并被添加到 W3C 規(guī)范中。Maskable icons 允許 Web 開(kāi)發(fā)人員指定一個(gè)將被裁剪的全出血圖標(biāo)。它是平臺(tái)無(wú)關(guān)的，因此 Windows 可以將其用于磁貼，iOS 可以將其用于圖標(biāo)。

如何創(chuàng)建 maskable icons

由于 maskable icon 格式的設(shè)計(jì)目的是與任何平臺(tái)一起工作，因此其大小和比例與 Android 的自適應(yīng)圖標(biāo)的大小和比例不同。這意味著您不能重用相同的資源。

Maskable icons 可以是任何大小，您可以繼續(xù)使用與普通透明圖標(biāo)相同的大小。但在設(shè)計(jì)圖標(biāo)時(shí)，請(qǐng)確保重要信息位于半徑等于圖像大小 40% 的“安全區(qū)域”圓圈內(nèi)。

保證此區(qū)域內(nèi)的所有像素都可見(jiàn)。區(qū)域外的像素可能會(huì)根據(jù)圖標(biāo)形狀和平臺(tái)被裁剪掉。

警告：如果您已經(jīng)有 Android 應(yīng)用，請(qǐng)避免將圖標(biāo)從 Android 應(yīng)用復(fù)制粘貼到 Web 應(yīng)用。比例不同，因此您的圖標(biāo)看起來(lái)太小。

將圖標(biāo)添加到 Web 應(yīng)用清單

創(chuàng)建圖標(biāo)后，您可以向 Web 應(yīng)用清單添加一個(gè)條目，類(lèi)似于其他圖標(biāo)資源。Web 應(yīng)用清單在一個(gè) JSON 文件中提供有關(guān) Web 應(yīng)用的信息，并包含一個(gè)“icons”數(shù)組。

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

Maskable icons 使用一個(gè)特殊的新鍵“purpose”來(lái)指示它們打算與圖標(biāo)蒙版一起使用。具有透明背景的圖標(biāo)的默認(rèn)“purpose”為“any”，并且可以通過(guò)空格分隔每個(gè)選項(xiàng)來(lái)為圖標(biāo)使用多個(gè)用途。

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

預(yù)覽您的圖標(biāo)

您想看看您自己的 maskable icons 看起來(lái)像什么嗎？我創(chuàng)建了一個(gè)工具 Maskable.app 來(lái)幫助您評(píng)估圖標(biāo)在不同形狀下的外觀。

該應(yīng)用允許您預(yù)覽在 Android 設(shè)備上可以找到的各種形狀中的圖標(biāo)。我希望這個(gè)工具能幫助您為漸進(jìn)式 Web 應(yīng)用創(chuàng)建獨(dú)特的圖標(biāo)。

[查看應(yīng)用] [查看源代碼]

一旦您對(duì)結(jié)果滿(mǎn)意，就可以開(kāi)始測(cè)試您的應(yīng)用了。Firefox Preview Nightly 和 Chrome Canary 都支持 maskable icons。您可以使用它們來(lái)查看您的 PWA 的外觀。

像 PWACompat 這樣的工具也支持 maskable icons。您可以根據(jù)新的 maskable icons 自動(dòng)生成 iOS 和其他設(shè)備的圖標(biāo)！

開(kāi)始創(chuàng)建您自己的圖標(biāo)吧

如果您希望更好地控制 PWA 圖標(biāo)在 Android 上的顯示方式，maskable icons 是您的最佳選擇。使用 maskable icons，您可以自定義圖標(biāo)的邊緣到邊緣顯示方式。希望本文能幫助您開(kāi)始創(chuàng)建第一個(gè) maskable icon。

圖標(biāo)來(lái)源：

• http://ipnx.cn/link/258b55f3d6bc1cafb846ac3bbe5bc643
• http://ipnx.cn/link/55a85e71b468ef171a7d4509b3f35f36
• http://ipnx.cn/link/284c1ffedc349416c5a95b82a0f6a6d7
• http://ipnx.cn/link/e5f6b927ce20f43fb7d5247109be554a
• http://ipnx.cn/link/41be696537187bb3b209c20dafeb2a81

以上是可掩蓋的圖標(biāo)：PWA的Android自適應(yīng)圖標(biāo)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！