Screensaver on application launch
I am currently creating an application with apache cordova. I need to make a popup screen to be displayed when my application is running. I tried to find information from the internet on how to do this, but without any good results. I would like to add that Im using JS, HTML and CSS (+ XML).
Currently; I have installed the extension - splash screen and my code in config.xml file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" id="io.cordova.myapp741b74" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" defaultlocale="en-US">
<name>MobiiliLukkari</name>
<description>A blank project that uses Apache Cordova to help you build an app that targets multiple mobile platforms: Android, iOS, Windows, and Windows Phone.</description>
<author href="http://cordova.io" email="dev@cordova.apache.org">Apache Cordova Team </author>
<content src="index.html" />
<access origin="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<vs:features />
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="5000" />
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
<param name="onload" value="true" />
</feature>
<preference name="windows-target-version" value="8.1" />
<!-- Support for Cordova 5.0.0 plugin system -->
<plugin name="cordova-plugin-whitelist" version="1" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<platform name="android">
<icon src="res/icons/android/icon-36-ldpi.png" density="ldpi" />
<icon src="res/icons/android/icon-48-mdpi.png" density="mdpi" />
<icon src="res/icons/android/icon-72-hdpi.png" density="hdpi" />
<icon src="res/icons/android/icon-96-xhdpi.png" density="xhdpi" />
</platform>
<platform name="ios">
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/icons/ios/icon-60-3x.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/icons/ios/icon-60.png" width="60" height="60" />
<icon src="res/icons/ios/icon-60-2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/icons/ios/icon-76.png" width="76" height="76" />
<icon src="res/icons/ios/icon-76-2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="res/icons/ios/icon-40.png" width="40" height="40" />
<icon src="res/icons/ios/icon-40-2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="res/icons/ios/icon-57.png" width="57" height="57" />
<icon src="res/icons/ios/icon-57-2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/icons/ios/icon-72.png" width="72" height="72" />
<icon src="res/icons/ios/icon-72-2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/icons/ios/icon-small.png" width="29" height="29" />
<icon src="res/icons/ios/icon-small-2x.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/icons/ios/icon-50.png" width="50" height="50" />
<icon src="res/icons/ios/icon-50-2x.png" width="100" height="100" />
</platform>
<platform name="windows">
<icon src="res/icons/windows/Square150x150Logo.scale-100.png" width="150" height="150" />
<icon src="res/icons/windows/Square150x150Logo.scale-240.png" width="360" height="360" />
<icon src="res/icons/windows/Square30x30Logo.scale-100.png" width="30" height="30" />
<icon src="res/icons/windows/Square310x310Logo.scale-100.png" width="310" height="310" />
<icon src="res/icons/windows/Square44x44Logo.scale-100.png" width="44" height="44" />
<icon src="res/icons/windows/Square44x44Logo.scale-240.png" width="106" height="106" />
<icon src="res/icons/windows/Square70x70Logo.scale-100.png" width="70" height="70" />
<icon src="res/icons/windows/Square71x71Logo.scale-100.png" width="71" height="71" />
<icon src="res/icons/windows/Square71x71Logo.scale-240.png" width="170" height="170" />
<icon src="res/icons/windows/StoreLogo.scale-100.png" width="50" height="50" />
<icon src="res/icons/windows/StoreLogo.scale-240.png" width="120" height="120" />
<icon src="res/icons/windows/Wide310x150Logo.scale-100.png" width="310" height="150" />
<icon src="res/icons/windows/Wide310x150Logo.scale-240.png" width="744" height="360" />
</platform>
<platform name="wp8">
<icon src="res/icons/wp8/ApplicationIcon.png" width="99" height="99" />
<icon src="res/icons/wp8/Background.png" width="159" height="159" />
</platform>
<platform name="android">
<splash src="res/screens/android/screen-hdpi-landscape.png" density="land-hdpi" />
<splash src="res/screens/android/screen-ldpi-landscape.png" density="land-ldpi" />
<splash src="res/screens/android/screen-mdpi-landscape.png" density="land-mdpi" />
<splash src="res/screens/android/screen-xhdpi-landscape.png" density="land-xhdpi" />
<splash src="res/screens/android/screen-hdpi-portrait.png" density="port-hdpi" />
<splash src="res/screens/android/screen-ldpi-portrait.png" density="port-ldpi" />
<splash src="res/screens/android/screen-mdpi-portrait.png" density="port-mdpi" />
<splash src="res/screens/android/screen-xhdpi-portrait.png" density="port-xhdpi" />
</platform>
<platform name="ios">
<splash src="res/screens/ios/screen-iphone-portrait.png" width="320" height="480" />
<splash src="res/screens/ios/screen-iphone-portrait-2x.png" width="640" height="960" />
<splash src="res/screens/ios/screen-ipad-portrait.png" width="768" height="1024" />
<splash src="res/screens/ios/screen-ipad-portrait-2x.png" width="1536" height="2048" />
<splash src="res/screens/ios/screen-ipad-landscape.png" width="1024" height="768" />
<splash src="res/screens/ios/screen-ipad-landscape-2x.png" width="2048" height="1536" />
<splash src="res/screens/ios/screen-iphone-568h-2x.png" width="640" height="1136" />
<splash src="res/screens/ios/screen-iphone-portrait-667h.png" width="750" height="1334" />
<splash src="res/screens/ios/screen-iphone-portrait-736h.png" width="1242" height="2208" />
<splash src="res/screens/ios/screen-iphone-landscape-736h.png" width="2208" height="1242" />
</platform>
<platform name="windows">
<splash src="res/screens/windows/SplashScreen.scale-100.png" width="620" height="300" />
<splash src="res/screens/windows/SplashScreen.scale-240.png" width="1152" height="1920" />
<splash src="res/screens/windows/SplashScreenPhone.scale-240.png" width="1152" height="1920" />
</platform>
<platform name="wp8">
<splash src="res/screens/wp8/SplashScreenImage.png" width="768" height="1280" />
</platform>
<access origin="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" />
<access origin="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<access origin="http://code.jquery.com/jquery-1.11..min.js" />
<access origin="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" />
<access origin="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<access origin="https://ajax.microsoft.com/ajax/jQuery/jquery-3.1.1.min.js" />
<access origin="http://code.jquery.com/jquery-1.4.5.min.js" />
<access origin="http://code.jquery.com/jquery-migrate-1.2.1.min.js" />
<access origin="http://code.jquery.com/ui/1.11.4/jquery-ui.js" />
<access origin="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" />
<access origin="https://mail.epedu.fi/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.epedu.fi%2fowa%2f" />
<access origin="https://wille.epedu.fi/" />
<preference name="Orientation" value="portrait" />
<preference name="Fullscreen" value="True" />
<plugin name="cordova-plugin-splashscreen" version="3.1.0" />
</widget>
So how do I get around this? How to make the splash screen appear for a couple of seconds after starting the application.
+3
source to share
1 answer
From my working project, just check my settings for both iOS and Android. I read a project that helped stop Splash screen disappearing when my app didn't finish loading, the settings below allow the splash screen to stay until the device is ready, after which it clears it. Works well.
<platform name="android">
<allow-intent href="market:*" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="true" />
<!-- 10000 to keep open whilst heating page is loaded into DOM -->
<preference name="SplashMaintainAspectRatio" value="true" />
</platform>
<platform name="ios">
<preference name="FadeSplashScreen" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="AutoHideSplashScreen" value="false" />
</platform>
Also in Index.js you will need to add the code: -
Inside your device ready function:
setTimeout(function () {
navigator.splashscreen.hide();
}, 50);
There is a lot of mixed documentation out there, but I can confirm the settings above work for my project.
+3
source to share