帶有 Web App Manifest 的 Android 9 上的自適應圖標

Question

我正在為我的 PWA 設置一個 Web 應用程序清單。 但是 Android 的圖標會被擠在一個圓形圖標中。

我嘗試了沒有背景的普通圖標，並且考慮了安全區。

我的 Android 上安裝的圖標圖像

遺憾的是，我沒有找到任何有關它的文檔，而且這個圖標真的讓我很煩惱。

編輯：

"name": "PWA-Test",
"short_name": "PWA-Test",
"display": "standalone",
"scope": "/",
"start_url": "/", 
"icons": [
    {
        "src": "/assets/android-chrome-36x36.png",
        "sizes": "36x36",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-48x48.png",
        "sizes": "48x48",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    },
    {
        "src": "/assets/android-chrome-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
],
"theme_color": "#5c3552",
"background_color": "#5c3552"

編輯 2：當我只使用圓形圖標時它似乎工作。 但是我猜每個 Android 版本的 UI 都不一樣。

通過制作圓形圖標解決了它。 現在的問題是，桌面上的圖標現在也是圓形的。

Answer 1

我在 Android 設備上運行我的 PWA，我不需要對圖標進行任何特殊調整。

這是我的網絡清單的一部分：

"icons": [
     // Other sizes
    {
      "src": "/images/icons-144.png",
      "type": "image/png",
      "sizes": "144x144"
    },    
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]

在 Chrome 的情況下，它至少需要兩個圖標大小 192x192 和 512x512：

包括一個 192x192 像素的圖標和一個 512x512 像素的圖標。 Chrome 會自動縮放設備的圖標。 如果您更喜歡縮放自己的圖標並調整它們以獲得完美的像素，請以 48dp 的增量提供圖標。

在 Chrome 71 或更高版本中生成的 WebAPK 將在初始屏幕上顯示一個更大的圖標。 只要提供了推薦的圖標，就不需要任何操作。

Answer 2

首先，您需要創建一個具有 2 個圖層的圖標。

您可以使用此實用程序： https : //maskable.app/editor

之后，您需要在 manifest.json 中設置目的可屏蔽

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

本文中的更多信息： https : //web.dev/maskable-icon/