Не настроен для пользовательского экрана-заставки

Настраиваемый экран-заставка делает ваше прогрессивное веб-приложение (PWA) более похожим на приложение, созданное для этого устройства. По умолчанию, когда пользователь запускает PWA с главного экрана, Android отображает белый экран, пока PWA не будет готово. Пользователь может видеть этот пустой белый экран до 200 мс. Настроив собственный экран-заставку, вы можете показать своим пользователям собственный цвет фона и значок вашего PWA, обеспечивая фирменный и привлекательный опыт.

Почему аудит заставки Lighthouse терпит неудачу

Маяк помечает страницы, у которых нет пользовательской заставки:

Аудит Lighthouse показывает, что сайт не настроен для пользовательской заставки

Как создать собственный экран-заставку

Chrome для Android автоматически отображает ваш собственный экран-заставку, если вы соответствуете следующим требованиям в манифесте веб-приложения :

  • Свойству name присвоено имя вашего PWA.
  • Для свойства background_color установлено допустимое значение цвета CSS.
  • Для свойства theme_color установлено допустимое значение цвета CSS.
  • Массив icons определяет значок размером не менее 512x512 пикселей.
  • Указанный значок существует и имеет формат PNG.

Дополнительную информацию см. в разделе «Добавление заставки для установленных веб-приложений в Chrome 47» .

Ресурсы

Исходный код для «Не настроен для пользовательского аудита заставки»

,

Настраиваемый экран-заставка делает ваше прогрессивное веб-приложение (PWA) более похожим на приложение, созданное для этого устройства. По умолчанию, когда пользователь запускает PWA с главного экрана, Android отображает белый экран, пока PWA не будет готово. Пользователь может видеть этот пустой белый экран до 200 мс. Настроив собственный экран-заставку, вы можете показать своим пользователям собственный цвет фона и значок вашего PWA, обеспечивая фирменный и привлекательный опыт.

Почему аудит заставки Lighthouse терпит неудачу

Маяк помечает страницы, у которых нет пользовательской заставки:

Аудит Lighthouse показывает, что сайт не настроен для пользовательской заставки

Как создать собственный экран-заставку

Chrome для Android автоматически отображает ваш собственный экран-заставку, если вы соответствуете следующим требованиям в манифесте веб-приложения :

  • Свойству name присвоено имя вашего PWA.
  • Для свойства background_color установлено допустимое значение цвета CSS.
  • Для свойства theme_color установлено допустимое значение цвета CSS.
  • Массив icons определяет значок размером не менее 512x512 пикселей.
  • Указанный значок существует и имеет формат PNG.

Дополнительную информацию см. в разделе «Добавление заставки для установленных веб-приложений в Chrome 47» .

Ресурсы

Исходный код для «Не настроен для пользовательского аудита заставки»