Прогрессивные веб-приложения. Есть ли способ отключить заставку, которую показывает Chrome, или хотя бы контролировать, когда заставка исчезает?

Question

Chrome представил заставки как функцию PWA, чтобы сделать их более похожими на нативные приложения. Он генерирует заставку из name, icon а также bg_color в манифесте веб-приложения. Подробнее здесь:

• https://developers.google.com/web/updates/2015/10/splashscreen

• https://developers.google.com/web/tools/lighthouse/audits/custom-splash-screen

Хотя все это хорошо, нет надлежащей документации о том, как долго Chrome решает сохранить заставку видимой.

В идеале я хотел бы представить, что так должно быть до тех пор, пока на экране не будет что-то значимое (только что-то более сложное), но по моему опыту кажется, что Chrome хранит этот экран-заставку довольно долго (может хорошо быть до загрузки страницы?)

Это очень плохо для людей, просматривающих мой сайт из-за медленных соединений - раньше, по крайней мере, они могли видеть, что что-то работает и происходит на экране, теперь они просто видят статичное изображение (заставку со значком и именем) - они не знают, как Время, которое потребуется, чтобы открыть веб-приложение, может легко стать скучным и выпадать. Это очень рискованно.

Могу ли я контролировать, когда исчезает заставка, или вообще отключить ее?

Answer 1

Вы можете зарегистрировать событие DOMContentLoaded, которое является первым запущенным событием, даже до того, как ваши другие вещи, такие как изображения, CSS и все еще загружаются. Используя это, вы можете исчезнуть / убрать заставку даже (может быть) раньше, когда произойдет ваше первое рисование (в зависимости от требований / реализации вашего сайта). Посмотрите пример здесь, где он пытается добавить анимацию к исчезновению заставки, а не простой переход. Вы можете определенно попробовать удалить заставку ранее по аналогичным причинам.

PS: Не удалось найти что-либо для отключения / тайм-аута заставки. Отсюда и работа вокруг!

Answer 2

Кажется, что ваша первая страница занимает слишком много времени, чтобы быть готовой (первая краска), возможно, у вас есть:

• Большой HTML-файл
• Загрузка таблиц стилей синхронно
• Javascript займет много времени, чтобы поселиться

Проверьте эти вещи, посмотрите, может ли решение каждого из них помочь.

Вы можете увидеть другие приложения PWA, такие как твиттер, о том, как они загружаются в webAPK, и узнать о них с помощью chrome dev-tool на рабочем столе.