Заставка PWA работает неправильно, даже если все требования соблюдены - PullRequest
Новая
       25

Заставка PWA работает неправильно, даже если все требования соблюдены

0 голосов
/ 25 сентября 2018

У меня настроена функциональность PWA для моей пользовательской среды, и все отлично работает, кроме заставки.Все следующие требования выполнены:

  • Свойству name установлено имя моего PWA.
  • Свойству background_color установлено правильное значение цвета CSS.
  • В массиве значков указывается значок размером не менее 512 на 512 пикселей.
  • Значок существует и является PNG.

Если я не удаляю все остальные значки, значок 512x512 будетне может использоваться для заставки.

Значок отображается в разделе «Приложения для Chrome Dev Tools», поэтому он четко его видит.

Chrome Dev Tools

Ниже мой файл manifest.json и ссылка на мой сайт тестирования. 

{
  "short_name": "New Site",
  "name": "New Site",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#17AAEC",
  "theme_color": "#17AAEC",
  "icons": [
    {
      "src": "assets/media/icon-pwa-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/media/icon-pwa-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/media/icon-pwa-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "assets/media/icon-pwa-256x256.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "assets/media/icon-pwa-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

https://framework.jacob.rocks/

Обновление 2018-10-29

ЭтоОказывается, что изображение заставки используется, когда не зарегистрировано работника сервиса, но если работник сервиса зарегистрирован, то используется меньший значок.Насколько я могу судить, это ошибка в Webkit.См. GIF ниже.

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

У меня была та же проблема - кажется, вам нужно не только правильно настроить значения px, но и проблемы с dp, которые зависят от плотности экрана и настроек dpi созданного изображения - см. Отличный ответ Жака здесь: Не удается получить значок заставки на Android Chrome PWA

0 голосов
/ 25 сентября 2018

Если вы не укажете только значок 512px, самый большой значок не будет выбран ... На данный момент нет правильных решений, чтобы исправить это.Вы можете определить только значок 512px, это не проблема.

...