[PWA] Customize the Splash Screen of a PWA built with create-react-app

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[PWA] Customize the Splash Screen of a PWA built with create-react-app相关的知识,希望对你有一定的参考价值。

android displays a splash screen for PWAs based on the icons and names you provide, but ios just displays a solid color splash screen for installed PWAs by default.

We\'ll make a new splash screen image for every iOS device resolution size that we want to support, and then we can make a link tag in index.html to specify those images as the splash screen for each device resolution.

Also, make sure to remove background_color from the manifest - or it may overwrite the splash screen images on iOS.

 

For Splash screen, it use 512*512 image for Andorid.

For IOS we need to add image for splash screen, no other way around currently.

 

First, we must tell iOS that the app is apple-mobile-web-app-capable with a meta tag.

<meta name="apple-mobile-web-app-capable" content="yes">

Then we can specify each of those launch images as the image for that resolution.

<link rel="apple-touch-startup-image" href="splash_640x1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="splash_750x1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="splash_1242x2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="splash_1125x2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="splash_1536x2048.jpg" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="splash_1668x2224.jpg" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="splash_2048x2732.jpg" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">

Finally, in manifest.json, we have to actually remove the "background_color" setting first. Otherwise, that will override all of our images.

 


以上是关于[PWA] Customize the Splash Screen of a PWA built with create-react-app的主要内容,如果未能解决你的问题,请参考以下文章

Qt学习笔记11.自定义控件 Customize the Widget

[PWA] Access the Camera in a PWA built with React

[PWA] 19. Cache the avatars

[PWA] 17. Cache the photo

[PWA] 18. Clean the photo cache

[PWA] 15. Using The IDB Cache And Display Entries