Прогрессивные веб-приложения. Есть ли способ отключить заставку, которую показывает 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 и все еще загружаются. Используя это, вы можете исчезнуть / убрать заставку даже (может быть) раньше, когда произойдет ваше первое рисование (в зависимости от требований / реализации вашего сайта). Посмотрите пример здесь , где он пытается добавить анимацию к исчезновению заставки, а не простой переход. Вы можете определенно попытаться удалить заставку ранее по тем же причинам.

P.S .: Не удалось найти ничего, чтобы отключить / отключить заставку. Отсюда и обходной путь!

Answer 2

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

• Большой файл HTML
• Синхронизация загрузки таблиц стилей
• Javascript требует много времени для урегулирования

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

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