Адаптивные значки на Android 9 с манифестом веб-приложения

Question

Я настраиваю манифест веб-приложения для моего PWA. Но иконки для 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, я думаю.

Решил это, сделав круглую иконку. Теперь проблема в том, что значок на рабочем столе теперь тоже круглый.

Answer 1

Во-первых, вам нужно создать иконку с двумя слоями.

Вы можете использовать эту утилиту: 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/

Answer 2

Я использую свои PWA на устройствах Android, и мне не нужно было вносить какие-либо специальные изменения в значки.

Вот часть моего веб-манифеста:

"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 автоматически масштабирует значок устройства. Если вы предпочитаете масштабировать свои собственные значки и настраивать их на пиксельное совершенство, предоставьте значки с шагом 48 точек на дюйм.

В WebAPK, созданных в Chrome 71 или более поздней версии, на заставке появится значок большего размера. Никаких действий не требуется, если указаны рекомендуемые значки.