I am building a Progressive Web App that mainly displays markers on a map (Mapbox GL JS). I have to load a lot of data and components, so the app takes a few seconds to load.
I made a loading screen on desktop, but on mobile I would like to have the splash screen to stay until the map and all the markers are loaded.
Here is my manifest.json :
{
"name": "App name",
"short_name": "App name",
"display": "fullscreen",
"orientation": "landscape",
"start_url": "http://applink.com",
"scope": "http://applink.com",
"background_color": "#191a1a",
"theme_color": "#191a1a",
"lang": "fr",
"icons": [{
"src": "img/pwa_192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/pwa_512.png",
"sizes": "512x512",
"type": "image/png"
}]
}
I also added this for iOS : <link rel="apple-touch-startup-image" href="img/ios_splash.png">
Is there any way to control the splash screen time, or leave it until all the elements are loaded on the page?