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

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.

Related

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.

Getting blank screen in IPA after updating angular cordova-ios platform

Initially we were using angular cordova-ios version as 4.5.4 and while uploading the IPA to Apple Store Connect it gave UIWebView error hence, upgraded the cordova-ios platform to 5.1.1 and added cordova-plugin-wkwebview-engine plugin. Now on generating IPA , it shows blank screen and doesn't route to the login screen.
Version details are as below:
angular-devkit/architect 0.10.7
#angular-devkit/build-angular 0.10.7
#angular-devkit/build-optimizer 0.10.7
#angular-devkit/build-webpack 0.10.7
#angular-devkit/core 7.0.7
#angular-devkit/schematics 0.8.9
#angular/cli 6.2.9
#ngtools/webpack 7.0.7
#schematics/angular 0.8.9
#schematics/update 0.8.9
rxjs 5.5.12
typescript 2.9.2
webpack 4.19.1
cordova-ios 5.1.1
We used the below command to build:
ng build --prod --source-map=false && cordova build ios
Our config.xml file
<?xml version='1.0' encoding='utf-8'?>
<widget android-activityName="appname" android-versionCode="10002" id="appname" version="1.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>appname</name>
<description>
Description
</description>
<author email="Support#appname.com" href="http://appname.com">
appname
</author>
<content src="index.html" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" />
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:usesCleartextTraffic="true" />
</edit-config>
<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:*" />
<icon density="ldpi" src="res/icon/android/ldpi.png" />
<preference name="CustomURLSchemePluginClearsAndroidIntent" value="true" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon density="ldpi" src="res/icon/android/ldpi.png" />
</platform>
<hook src="hooks/appBeforeBuild.js" type="before_build" />
<hook src="hooks/appBeforeBuild.js" type="before_run" />
<engine name="browser" spec="^5.0.3" />
<plugin name="cordova-plugin-dbcopy" spec="^2.1.2" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-plugin-network-information" spec="^2.0.1" />
<plugin name="uk.co.workingedge.cordova.plugin.sqliteporter" spec="^1.1.0" />
<plugin name="cordova-plugin-device" spec="^2.0.2" />
<plugin name="cordova-plugin-printer" spec="^0.7.3" />
<plugin name="cordova-plugin-file-transfer" spec="^1.7.1" />
<plugin name="cordova-plugin-customurlscheme" spec="^4.4.0">
<variable name="URL_SCHEME" value="URL_SCHEME_NAME" />
<variable name="ANDROID_SCHEME" value=" " />
<variable name="ANDROID_HOST" value=" " />
<variable name="ANDROID_PATHPREFIX" value="/" />
</plugin>
<plugin name="cordova-plugin-dialogs" spec="^1.3.3" />
<plugin name="cordova-plugin-bluetoothle" spec="^4.5.10" />
<plugin name="cordova-plugin-bluetooth-peripheral-usage-description" spec="^1.0.1">
<variable name="TEXT" value="Some string" />
</plugin>
<plugin name="cordova-plugin-geolocation" spec="^4.0.2" />
<plugin name="cordova-plugin-android-permissions" spec="^1.0.2" />
<plugin name="cordova-plugin-ble-central" spec="^1.2.5" />
<plugin name="cordova-plugin-inappbrowser" spec="^3.2.0" />
<plugin name="cordova-plugin-permission" spec="^0.1.0" />
<plugin name="cordova-plugin-vibration" spec="^3.1.1" />
</widget>
Unfortunately, white screen errors are pretty generic, as the error condition isn't listed in the console (see Cordova - white screen after splash, no exceptions in console).
You can, however, launch the app in the iOS simulator and hook it up to Safari's dev tools, and then hit refresh. It should kick out the exception that iOS is running into.

PhoneGap doesn't show iOS build

I'm developing a hybrid mobile app using PhoneGap as a build tool.
Enviroment:
Visual Studio 2015
DevExteme library
PhoneGap cli version 8.0.0
Cordova iOS version 5.0.0
Plugin added: Cordova Support Google Services and Cordova Plugin Firebase Analytics
Development certificate for iOS unlocked on my PhoneGap account
Steps:
Build a PhoneGap Zip.
Upload the code on PhoneGap account.
Build the app.
The problem: PhoneGap doesn't show iOS build, but only Android (which works perfectly on device)
What am I doing wrong?
Thank you in advance,
Sara
Edit: 2019-03-07
As requested, I add config.xml.
<widget id="com.devexpress.apptemplate" version="1.0" versionCode="1">
<name>ApplicationTemplate</name>
<description>Template</description>
<author email="email#sample.com" href="http://sample.com">Author</author>
<preference name="permissions" value="none" />
<preference name="prerendered-icon" value="true" />
<preference name="android-windowSoftInputMode" value="adjustResize" />
<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="60000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-targetSdkVersion" value="22" />
<preference name="cordova-ios" version="5.0.0" />
<preference name="phonegap-version" value="cli-8.0.0" />
<plugin name="cordova-plugin-splashscreen" onload="true" />
<plugin name="cordova-plugin-whitelist" />
<plugin name="cordova-plugin-ios-longpress-fix" />
<plugin name="cordova-plugin-statusbar" onload="true" />
<access origin="*" />
<plugin name="cordova-plugin-inappbrowser" source="npm"></plugin>
<platform name="ios">
<resource-file src="GoogleService-Info.plist" />
</platform>
<plugin name ="cordova-support-google-services" />
<plugin name ="cordova-plugin-firebase-analytics" />
</widget>

Cordova Ionic project with Firebase Messaging and Firebase Dynamic Links

In the app that we're building, we need Firebase Dynamic Link, because the Sign Up is with Firebase email link login. This login will send an email to the provided email address, that when clicked, will open the app with a dynamic link. To keep our users engaged, we also like to send Push Notifications. I can get both of them to work together on Android when I use the versions by chemerisuk on GitHub. I even get an iOS build, but I get stuck on getting a token on iOS. Getting this error message:
Failed to fetch default token Error Domain=com.firebase.iid Code=1003 "(null)"
I've double checked my Firebase Project settings (bundle id, app id prefix, cloud messaging sender id, cloud messaging apn key) and my Apple settings (certificates, provisioning profiles, keys and identifiers). I've tried it on Simulators and Real Devices. I've tried Development builds, App Store Archives and Ad Hoc Archives.
Unfortunately, Dynamic Links isn't included in the Cordova Firebase plugin. When I try to add a different fcm plugin, it includes the complete Firebase Core, which conflicts with Dynamic Links.
I feel like I'm really close, who has any experience with this combination of plugins and got it working on iOS?
This is my environment:
Ionic:
ionic (Ionic CLI) : 4.0.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.1.8
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0, ios 4.5.5
System:
Android SDK Tools : 26.1.1
ios-deploy : 1.9.2
ios-sim : 6.1.2
NodeJS : v8.11.3 (/usr/local/bin/node)
npm : 5.6.0
OS : macOS High Sierra
Xcode : Xcode 9.4.1 Build version 9F2000
Environment:
ANDROID_HOME : /Users/user/Library/Android/sdk/
My (relevant) Cordova config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget android-packageName="com.example.android" android-versionCode="10001" id="com.example.app" ios-CFBundleIdentifier="com.example.ios" ios-CFBundleVersion="1.0.1" version="1.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Example</name>
<description>Some description</description>
<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="BackgroundColor" value="0xff168aa5" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="Orientation" value="portrait" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<resource-file src="google-services.json" target="app/google-services.json" />
<allow-intent href="market:*" />
<icon />
<splash />
</platform>
<platform name="ios">
<resource-file src="GoogleService-Info.plist" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon />
<splash />
</platform>
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-plugin-device" spec="^2.0.2" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^1.2.1" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.2" />
<plugin name="cordova-plugin-x-socialsharing" spec="^5.4.1" />
<plugin name="cordova-plugin-qrscanner" spec="^2.6.0" />
<allow-navigation href="http://192.168.178.19:8101" />
<plugin name="cordova-plugin-firebase-dynamiclinks" spec="^1.0.0">
<variable name="APP_DOMAIN" value="example.com" />
<variable name="PAGE_LINK_DOMAIN" value="ab123.app.goo.gl" />
<variable name="FIREBASE_DYNAMIC_LINKS_VERSION" value="+" />
</plugin>
<plugin name="cordova-plugin-firebase-messaging" spec="^1.1.0">
<variable name="FIREBASE_MESSAGING_VERSION" value="17.1.+" />
<variable name="ANDROID_SUPPORT_VERSION" value="27.+" />
</plugin>
<engine name="android" spec="7.0.0" />
<engine name="ios" spec="4.5.5" />
</widget>
Because I was using only parts of the Firebase library, I didn't include Firebase Analytics, because I wasn't using it. Apparently, it's necessary for the functioning of the rest of the plugins. So installing cordova-plugin-firebase-analytics was the fix for me.
For some, it was making sure that they had the correct Firebase project settings. Go to Firebase > Cloud messaging > iOS app configuration and make sure you've uploaded a valid APNs Authentication Key or APNs Certificates.
Hope this helps other people who want to use both Firebase Messaging AND Firebase Dynamic Links!

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.

Resources