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)了對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)對製造商和設(shè)備對各種要求，Android 引入了“自適應(yīng)圖標(biāo)”。您提供一個(gè)邊緣周圍有額外空間的圖像，Android 將將其裁剪成正確的形狀。

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

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

如何創(chuàng)建maskable icons

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

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

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

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

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

創(chuàng)建圖標(biāo)後，您可以向Web 應(yīng)用清單添加一個(gè)條目，類似於其他圖標(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”來指示它們打算與圖標(biāo)蒙版一起使用。具有透明背景的圖標(biāo)的默認(rèn)“purpose”為“any”，並且可以通過空格分隔每個(gè)選項(xiàng)來為圖標(biāo)使用多個(gè)用途。

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

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

您想看看您自己的maskable icons 看起來像什麼嗎？我創(chuàng)建了一個(gè)工具M(jìn)askable.app 來幫助您評估圖標(biāo)在不同形狀下的外觀。

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

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

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

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

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

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

圖標(biāo)來源：

• 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)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！