ionic 4 iOS app stuck at splash screen on iOS 13+ - ios

config.xml
<xml version='1.0' encoding='utf-8'?>
<widget id="com.leo9.gameofplan" version="0.0.4" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Game Of Plan</name>
<description>The Game of Plan app is designed to: Capture your Thoughts and Feelings and convert it into Tangible Action Plan.</description>
<author email="info#leo9studio.com" href="https://leo9studio.com/">Le9studio Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="WKWebViewOnly" value="true" />
<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />
<preference name="android-minSdkVersion" value="19" />
<preference name="android-targetSdkVersion" value="28" />
<preference name="BackupWebStorage" value="none" />
<preference name="DisallowOverscroll" value="true" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="OverrideUserAgent" value="Mozilla/5.0 Google" />
<allow-navigation href="*" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^4.0.0">
<variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
</plugin>
<plugin name="cordova-plugin-network-information" spec="~2.0.1" />
<plugin name="cordova-plugin-secure-storage" spec="^3.0.2" />
<plugin name="cordova-plugin-screen-orientation" spec="^3.0.2" />
</widget>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Game of Plan</title>
<base href="." />
<meta name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="Content-Security-Policy"
content="font-src 'self' data:; img-src * data:; default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' * ; style-src 'self' 'unsafe-inline' *">
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<app-root></app-root>
</body>
</html>
here i attache my config.xml and index.html file.
my app is stuck at splash screen in ios13+ devices. for that reasons the app is rejected for publish for app store. i tried many thing to resolve this error. degrade splash screen plugin that wont work, also added some splash screen related config line into config.xml that also wont work.
what should be the solution?

Yu should add the following code inside your <platform name="ios"> tag:
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
Taken from here: https://cordova.apache.org/howto/2020/03/18/wkwebviewonly.html

I have never used Cordova splashscreen but looking at your config.xml content I see that you have a duplicate SplashScreenDelay preference, one has a value of 30000, the equivalent of 30 seconds and the other has a value of 10000, this can be the reason behind the problem. I would remove the duplicate preference and set the time value to 5000 (5 seconds), I would also add AutoHideSplashScreen preference and set it to false, then add the a timer in the deviceready event handler:
function onDeviceReady() {
setTimeout(function () {
navigator.splashscreen.hide();
}, 5000);
}
It should be explained in here. Check this too.
I hope this helps.

Related

Unsupported URL error on ionic 1 (ios devices only)

Unfortunately I needed to do a project with ionic 1. I did the project. It works flawlessly for Android for Web and for iOS Web. But the project file does not work on iOS devices. After passing the Splash Screen, it gives an "unsupported URL" error no matter what page it is. I couldn't solve this problem.
I am getting this error in Xcode log:
Domain=RBSAssertionErrorDomain Code=2 "Specified target process does not exist"
UserInfo={NSLocalizedFailureReason=Specified target process does not exist}
On the device this error:
Failed to load webpage with error: unsupported URL
Index.html:
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' data: gap: 'unsafe-inline' 'unsafe-eval'; style-src * 'self' 'unsafe-inline' 'unsafe-eval' gap:; script-src * 'self' 'unsafe-inline' 'unsafe-eval' gap:; frame-src *;">
config.xml:
<access origin="*" />
<allow-intent href="http:///" />
<allow-intent href="https:///" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="orientation" value="portrait" />
<allow-navigation href="file:///" />
<allow-navigation href="http:///" />
<allow-navigation href="https:///" />
<allow-navigation href="data:*" />
<allow-navigation href="*" />
<allow-navigation href="http://localhost:8080/*" />
Home Page link:
http://localhost:8100/#/app/firstPage

Cordova iOS App is showing White Screen with Random Text after WKWebView Change

My Cordova iOS App is showing White Screen with some Random Text while running the application on simulator after using WKWebView. It's working fine in UIWebView.
We are using Cordova 8.0.0 and Cordova iOS 5.1.1
This is my Config.xml
[<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="WKWebViewOnly" value="true" />
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<allow-navigation href="http://localhost:8080/*" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="1" />
<plugin name="cordova-plugin-fullscreen" spec="~1.3.0" />
<plugin name="cordova-plugin-inappbrowser" spec="~4.0.0" />
<plugin name="cordova-plugin-network-information" spec="~2.0.2" />
<plugin name="cordova-plugin-screen-orientation" spec="~3.0.2" />
<plugin name="cordova-plugin-statusbar" spec="~2.4.3" />
<plugin name="cordova-plugin-crypt-file" spec="~1.3.3" />
<plugin name="cordova-plugin-sslcertificatechecker" spec="~6.0.0" />
<plugin name="cordova-plugin-iroot" spec="~2.1.0" />
<plugin name="es6-promise-plugin" spec="^4.2.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^5.0.0" />
<engine name="ios" spec="^5.1.1" />][1]
the index.html file is not rendering.
Thanks in advance.

Ionic 3 build --prod causes white screen on iOS only

Hi i'm trying to compile my Ionic 3 app to iOS and it does not seams to be working.
The compilation works fine, however, when i'm trying to test the app using an iOS emulator, I got a white screen.
There is no error in the console, nor in the XCode error log.
I know the code is Ok since it's working perfeclty on android and browser.
I have tried to remove and reinstall the iOS platform, to remove and reisntall the node_module folder with no success.
My guess is, that the code isn't even loaded since when i'm trying to inspect the emulator using Safari Developer tool, the title of the page is index.html rather than the title i've set on the login page.
Here are the relevents files :
My config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.mycompany.myAwesomeApp" version="3.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>my awesome app</name>
<description>My awesome app description</description>
<author email="support#myCompany.com" href="https://myCompany.com">My company dev team</author>
<content src="index.html" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="loadUrlTimeoutValue" value="60000" />
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<platform name="android">
<!-- irrelevent android icons -->
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<!-- irrelevent icon files -- >
</platform>
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<plugin name="phonegap-plugin-push" spec="~2.2.2" />
<plugin name="cordova-plugin-console" spec="^1.1.0" />
<plugin name="cordova-plugin-device" spec="^1.1.7" />
<plugin name="cordova-plugin-splashscreen" spec="^4.1.0" />
<plugin name="cordova-plugin-statusbar" spec="^2.4.1" />
<plugin name="cordova-plugin-camera" spec="^4.0.2" />
<plugin name="cordova-plugin-geolocation" spec="^4.0.1" />
<plugin name="cordova-plugin-inappbrowser" spec="^2.0.2" />
<plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
<plugin name="cordova-plugin-x-socialsharing" spec="^5.3.2" />
<plugin name="cordova-plugin-headercolor" spec="^1.0.0" />
<plugin name="cordova-plugin-network-information" spec="^2.0.1" />
<plugin name="cordova-plugin-file" spec="^6.0.1" />
<plugin name="cordova-plugin-advanced-http" spec="2.0.4" />
<plugin name="cordova-plugin-ionic-webview" spec="^4.0.1">
<variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
</plugin>
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<engine name="android" spec="7.1.4" />
<engine name="browser" spec="5.0.1" />
<engine name="ios" spec="4.5.5" />
Ionic Info :
Ionic:
ionic (Ionic CLI) : 4.12.0 (/Users/nic/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.0
#ionic/app-scripts : 3.1.4
Cordova:
cordova (Cordova CLI) : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 7.1.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-webview 1.2.1, (and 16 other plugins)
System:
NodeJS : v10.15.3 (/Users/nic/.nvm/versions/node/v10.15.3/bin/node)
npm : 6.4.1
OS : macOS High Sierra
Xcode : Xcode 10.0 Build version 10A255
I ended up finding my problem. I was loading code in the constructor rather than in an ionViewDidLoad function. I have no idea why this works on Android, but not on iOS.

Cordova ionic can't connect to to any internet services

I've been building an app with cordova and ionic using angular js. When I complile the project to android everything works fine, but with iOS I can't connect to anything.
I'm trying to log in to firebase database, as well as exchange some HTTP requests. again, all works fine on android.
Here's my config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="private.private.private" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Puurs 725</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi#ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-navigation href="http://ionic.local/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="*://*youtube.com" />
<allow-navigation href="*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
<plugin name="cordova-plugin-whitelist" spec="1.3.1" />
<plugin name="cordova-plugin-console" spec="1.0.5" />
<plugin name="cordova-plugin-statusbar" spec="2.2.1" />
<plugin name="cordova-plugin-device" spec="1.1.4" />
<plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
<plugin name="NetworkStatus" value="CDVConnection" />
<plugin name="cordova-plugin-googleplus" spec="~5.1.1">
<variable name="REVERSED_CLIENT_ID" value="com.googleusercontent.apps.lotsofprivatenumbers" />
</plugin>
</widget>
Fun thing is that this was supposed to be working. But I accidently overwrote my index.html file. In there meta data for my index I have:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
Rings a bell to anyone?
Well, I learned how to hook up my ipad running the app to my mac, debugged the safari console (this feature is awesome) and found out a javascript error was blocking further executions.
More specific, Object.values is not supported on safari.

cordova[phonegap] Setting splash screen is not working fine in ios

I have added splash screen for my phonegap app.
I am building phonegap app online at http://build.phonegap.com.
Splash Screen is working fine for android.But on ios splash screen hides before the defined time.
Config.xml For Splash Screen
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
xmlns:android = "http://schemas.android.com/apk/res/android"
id = "com.clerisy.arcade"
versionCode = "10"
version = "1.0.0" >
<!-- versionCode is optional and Android only -->
<name>xxxxxxxxxxxxx</name>
<description>
xxxxxxxxxxxxxxxxx
</description>
<author href="https://build.phonegap.com" email="support#phonegap.com">
xxxxxxxxxxxxxxxx
</author>
<preference name="permissions" value="none"/>
<preference name="phonegap-version" value="3.6.3" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="7" />
<preference name="android-installLocation" value="auto" />
<preference name="backgroundColor" value="0xff38c0f4"/>
<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<!-- Plugins -->
<!-- Core plugins -->
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.5.2" />
<gap:plugin name="org.apache.cordova.network-information" version="0.2.12" />
<gap:plugin name="nl.x-services.plugins.socialsharing" version="4.3.8" />
<gap:plugin name="org.apache.cordova.device" version="0.2.12" />
<gap:plugin name="com.phonegap.plugin.statusbar" version="1.1.0" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<!-- Set Icon and splash screen -->
<icon src="icon.png" platform="android" width="57" height="57" density="mdpi" />
<gap:splash src="screen.png"/>
<gap:config-file platform="ios" parent="CFBundleShortVersionString">
<string>100</string>
</gap:config-file>
<content src="index.html" />
<access origin="*" />
</widget>
to hide splashscreen i am using
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Hide splash Screen
setTimeout(function() {
navigator.splashscreen.hide();
}, 2000);
The Problem is :-
it is working fine on android but on iphone it changes the resolution of splashscreen after few seconds.
Install the splash screen plugin
cordova plugin add org.apache.cordova.splashscreen
For iOS you have to hide splash screen inside timeout function in document ready, you can define the duration after which the splashscreen should hide.
setTimeout(function() {
navigator.splashscreen.hide();
}, 8000);
set autohide splash to false in config.xml
<preference name="AutoHideSplashScreen" value="false" />
Refer the plugin documentation for more detail https://github.com/apache/cordova-plugin-splashscreen/blob/master/doc/index.md
If you have apple device build uisng Xcode and add sleep in main thread of app (in app delegate) and you are done with it

Resources