добавить фоновое изображение на заставку прогрессивного веб-приложения?

Из MDN:

В Chrome 47 и более поздних версиях отображается заставка для веб-приложения, запущенного с главного экрана. Этот экран-заставка создается автоматически с использованием свойств в манифесте веб-приложения, а именно: name, background_color и значка в icons array, который ближе всего к разрешению 128 точек на дюйм для устройства.

Мне интересно, можно ли использовать полноэкранное фоновое изображение вместо сгенерированного фона?


progressive-web-apps
person David Scales    schedule 24.02.2017    source источник
comment
Поскольку добавление фоновых изображений на экраны-заставки невозможно, я рекомендую прочитать документацию W3C. Он гораздо более подробен, чем от Mozilla, и обсуждение продолжается. по разработке, которые вы можете найти на github.   -  person Xavier    schedule 10.09.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

Если вы хотите, чтобы значок всегда отображался, учтите, что 48dp — это минимальный размер изображения, которое мы будем отображать, что, если вы возьмете поддерживаемую в настоящее время максимальную плотность отображения (4x), тогда 48 * 4 = 192px. Нам повезло, потому что нам нужно изображение размером 192 пикселя, чтобы добавить на главный экран! Ура. Поэтому я бы рекомендовал всегда иметь 192 пикселя в качестве значка минимального размера и создать 3 другие версии в 256 пикселях, 384 пикселях и 512 пикселях. Однако, если вы хотите убедиться, что пользователь не загружает слишком много данных для экрана-заставки, особенно на устройстве с низкой плотностью, вы можете пойти ниже, и Chrome попытается получить наиболее подходящее изображение.

В нем указано, что максимальная плотность дисплея, поддерживаемая в настоящее время, составляет 4x от 48dp.

Для этого вы можете отправить запрос функции.

person abielita    schedule 25.02.2017
comment
Спасибо. Я видел этот документ, и, похоже, он указывает, что минимальный размер изображения составляет 48 dp, а 128 dp [является] идеальным размером. Но, похоже, не указан максимальный размер. Извините, если я неправильно истолковываю это. Я полагаю, поскольку это не упоминается, это невозможно, но было бы лучше, если бы это было явно. - person David Scales; 26.02.2017
comment
Как это ответ? ОП запросил фоновое изображение на заставке, а не значки. Поскольку я много читал документы, кажется, что это невозможно сделать. Использование значков для имитации фона, безусловно, является хаком. Поскольку реализация находится в рабочем проекте, я бы не советовал использовать хаки или обходные пути. - person Xavier; 10.09.2019

arrow_upward
0
arrow_downward

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

Вы можете просто позволить загрузке вашего экрана-заставки, а затем, когда ваш URL-адрес наконец загрузится, вы можете использовать Javascript для запуска события, которое стилизует ваш собственный «фиктивный» экран-заставку до того, как загрузится остальная часть вашего документа. Хотя для конечного пользователя это может показаться «хакерским», на самом деле это всего лишь обходной путь, который никак не влияет на работу манифеста. Если вы пойдете по этому пути, я предлагаю использовать медиа-запросы для проверки наличия display-mode. Таким образом, ваш CSS будет знать, когда ваше приложение находится в определенном режиме, и тогда вы сможете соответствующим образом стилизовать его.

Ваш CSS styles.css:

/* the wrapper will be visible later after the document loads */
#wrapper { display:none; }

/*
Using a media query to test for the display-mode of your application
*/
@media all and (display-mode: fullscreen) {
   body {
      margin: 0;
      border: 5px solid black;
   }
}

#splash_screen {
   /* all your splash screen styles */
}

Убедитесь, что вы объявили режим отображения в своем манифесте:

"дисплей": "автономный"

Ваш HTML;

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">

<script type="text/javascript">

/* with setTimeout you have control over how long the
splash screen sticks because the document will load first. */
setTimeout( function() {
   var wrapper= document.getElementById("wrapper") ;
   var splash_screen = document.getElementById("splash_screen") ;
   document.body.removeChild(splash_screen) ;
   wrapper.style.display = "initial" ;
   } , 2000 ) ;

</script>
</head>

<body>
<div id="splash_screen"></div>

<div id="wrapper">
/* the rest of your content */
</div>
</body>
</html>

Документация MDN по режиму отображения CSS . Документация MDN в отображении манифеста.

Я пытался найти способ самостоятельно использовать фоновые изображения на экранах-заставках, и именно так я оказался здесь. В своем стремлении я придумал фиктивную заставку. Имейте в виду, я не тестировал этот код.

person Xavier    schedule 10.09.2019
comment
Вам, вероятно, потребуется добавить свойство z-index к экрану-заставке и одно к оболочке, поскольку оболочка, естественно, будет иметь более высокий z-индекс, поскольку она является последним дочерним элементом своего родителя. - person Xavier; 10.09.2019