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

От MDN:

В Chrome 47 и по-нови версии се показва начален екран за уеб приложение, стартирано от начален екран. Този начален екран се генерира автоматично с помощта на свойства в манифеста на уеб приложението, по-специално: name, background_color и иконата в icons array, която е най-близка до 128dpi за устройството.

Чудя се дали е възможно да използвам фоново изображение на цял екран вместо генерирания фон?


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.

Ако искате да сте сигурни, че иконата винаги ще се показва, помислете, че 48 dp е минималният размер на изображението, което ще покажем, което, ако вземете поддържания в момента дисплей с максимална плътност (4x), тогава 48 * 4 = 192 пиксела. Това е късмет, защото имаме нужда от 192px изображение, за да работи Add to Homescreen! Ура Затова бих препоръчал винаги да имате 192px като минимален размер на иконата и да създадете 3 други версии на 256px, 384px и 512px. Ако обаче искате да сте сигурни, че потребителят не изтегля твърде много данни за началния екран, особено на устройство с ниска плътност, тогава можете да отидете по-ниско и Chrome ще се опита да извлече най-подходящото изображение.

Той заяви, че максималната плътност на дисплея, поддържана в момента, е 4x от 48dp.

Можете да подадете заявка за функция за това.

person abielita    schedule 25.02.2017
comment
Благодаря. Бях виждал този документ и изглежда уточнява, че минималният размер на изображението е 48dp, като 128dp [е] идеалният размер. Но изглежда не указва максимален размер. Извинете, ако тълкувам това погрешно. Предполагам, че тъй като не е споменато, не е възможно, но би било по-добре да е изрично. - person David Scales; 26.02.2017
comment
Как е това отговор? OP поиска фоново изображение на началния екран, а не икони. Тъй като прочетох подробно документите, изглежда, че това не може да бъде направено. Използването на икони за фалшифициране на фон със сигурност е хак. Тъй като внедряването е в работна чернова, не бих предложил да използвате хакове или заобиколни решения. - 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="/bgstyles.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 display-mode . MDN документация за показване на манифест.

Опитвах се да намеря начин да използвам фонови изображения на начални екрани и така се озовах тук. В стремежа си стигнах до идеята за макет начален екран. Имайте предвид, че не съм тествал този код.

person Xavier    schedule 10.09.2019
comment
Вероятно ще трябва да добавите свойство z-index към началния екран и едно към обвивката, тъй като обвивката естествено ще има по-висок z-индекс, тъй като е последното дете на своя родител. - person Xavier; 10.09.2019