可掩蓋的圖標：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中文網其他相關文章！