I’m building an Ionic app using Angular/Firebase.
I have a problem where some iPhone’s get stuck on the splash screen. I don’t know why, and I’m not sure how to debug. I’ve tested on 4 iPhone X’s, it works on 2, and doesn’t work on the other 2. They all have the exact same version of the code. Sometimes I’ll add a new version of the app to testflight, and it’ll fix the issue, but then a few days later when I update the app again, it breaks, and I don’t think it’s because of the code. Only some javascript/css changes. This issue doesn’t appear on Android.
Here is my config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.my.id" version="0.4.9" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Example</name>
<description>my desc.</description>
<author email="hello@example.com" href="https://example.com">Examepl 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="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="100" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="loadUrlTimeoutValue" value="60000" />
<preference name="target-device" value="handset" />
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<preference name="orientation" value="portrait" />
<platform name="android">
<allow-intent href="market:*" />
// the icons/splashscreens
<resource-file src="google-services.json" target="google-services.json" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
// the icons/splashscreens
</platform>
<plugin name="cordova-plugin-device" spec="^2.0.1" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^1.1.16" />
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" />
<plugin name="cordova-sqlite-storage" spec="^2.2.1" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<allow-navigation href="http://192.168.9.77:8100" />
<allow-navigation href="http://192.168.1.27:8100" />
<allow-navigation href="http://192.168.1.5:8100" />
<edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
<string>To connect you to your local university!</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
<string>To let you upload images!</string>
</edit-config>
<plugin name="cordova-plugin-geolocation" spec="^4.11.0">
<variable name="GEOLOCATION_USAGE_DESCRIPTION" value="To connect you to your local university!" />
</plugin>
<plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
<plugin name="cordova-plugin-firebase" spec="1.0.5" />
<plugin name="cordova-plugin-camera" spec="^4.0.3" />
<plugin name="cordova-plugin-request-location-accuracy" spec="^2.2.3" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.2" />
<plugin name="cordova.plugins.diagnostic" spec="^4.0.8" />
<plugin name="cordova-plugin-google-analytics" spec="^1.8.6">
<variable name="GMS_VERSION" value="16.0.3" />
</plugin>
<plugin name="cordova-plugin-ionic" spec="^5.1.5">
<variable name="APP_ID" value="0825b6f0" />
<variable name="CHANNEL_NAME" value="Production" />
<variable name="UPDATE_METHOD" value="background" />
<variable name="WARN_DEBUG" value="true" />
<variable name="UPDATE_API" value="https://api.ionicjs.com" />
<variable name="MAX_STORE" value="2" />
<variable name="MIN_BACKGROUND_DURATION" value="30" />
</plugin>
<engine name="android" spec="^7.1.1" />
<engine name="browser" spec="^5.0.4" />
<engine name="ios" spec="^4.5.5" />
</widget>
and then in my app.component.ts file I have:
hideSplashAfter6: boolean = true;
this.zone = new NgZone({});
this.afAuth.auth.onAuthStateChanged((user) => {
this.zone.run(() => {
if (user) {
this.rootPage = HomePage;
this.splashScreen.hide();
this.hideSplashAfter6 = false;
} else {
this.rootPage = LoginPage;
this.splashScreen.hide();
this.hideSplashAfter6 = false;
console.log("Not logged in")
}
});
});
setTimeout(() => {
if(this.hideSplashAfter6) {
this.splashScreen.hide();
}
}, 6000)
So this removes the splashScreen.
Running npm outdated shows what versions I’m on. I don’t want to upgrade all of them though as stuff usually breaks when I do that.
I really don’t know what to do. I feel like 1 plugin is causing issues, but I really don’t know… Any ideas? Thank you.