Reactjs PWA splash screen not working on iOS
Question
I've been working on this for awhile and just can't get it to work for some reason. I've followed multiple tutorials and added in what I believe to be the correct tags, but the splash screen isn't showing up.
Specs:
- iPhone 8+
- iOS 12.2
The app is made with Reactjs and has service worker enabled
I've tried uninstall/reinstalling the PWA, clearing browser data, and restarting my device.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="description" content="TimeCard application."> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1,viewport-fit=cover" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <meta name="theme-color" content="#2A2B3A"/> <meta name="apple-mobile-web-app-capable" content="yes" > <meta name="apple-mobile-web-app-status-bar-style" content="default"> <link rel="icon" sizes="192x192" href="%PUBLIC_URL%/app_icon_192.png"> <link rel="icon" sizes="512x512" href="%PUBLIC_URL%/app_icon.png"> <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/app_icon_192.png"> <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/app_icon.png"> <link href="%PUBLIC_URL%/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <link href="%PUBLIC_URL%/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <link href="%PUBLIC_URL%/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" /> <link href="%PUBLIC_URL%/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" /> <link href="%PUBLIC_URL%/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <link href="%PUBLIC_URL%/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" /> <link href="%PUBLIC_URL%/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <link href="%PUBLIC_URL%/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <link href="%PUBLIC_URL%/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <link href="%PUBLIC_URL%/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <title>TimeCard</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>
1 answers
solution1
1 2019-04-10 22:35:01
See: PWA Tips and Tricks
iOS To make your Progressive Web App more native-like on iOS devices, you can add a custom splash screen that is displayed when users launch your app.
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to Change Text Color in PWA Splash Screen
requestPictureInPicture not working on iOS PWA
Splash screen in apache cordova is not working
iOS PWA - Open Maps returns to blank screen
trigger.io hangs on splash screen in iOS
Phonegap 3.1 on iOS hide splash screen manually
ReactJS PWA & Firebase - Service Worker Registration Fail in IOS
Sidenav trigger not working on Safari/iOS PWA
How to fix while screen after splash screen in cordova ios?
IOS App Stuck on white screen after splash screen
Related Tags