4

I have an iOS app developed using Cordova (ios engine 4.4.0) in TestFlight. It all works great, except with the latest iOS 12 beta.

Users reported that the app restarts itself randomly on iOS 12 (iPhoneX). This happens randomly, possibly triggered by user interaction with the DOM, but not always.

I've tested on my own iPhone6S with iOS 12 and haven't reproduced it, so I wonder if it's specific to iPhoneX + iOS 12.

Users don't have a crash report for the app, which makes me think it's the WebView reloading the page (it's a single page app), rather than an actual app crash.

This doesn't happen on any other device or iOS version - has anyone else experienced this or have a solution?

Here is the main section of my Cordova config.xml:

<content src="index.html" />
<preference name="BackupWebStorage" value="local" />
<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<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="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="KeepRunning" value="false" />
<preference name="Fullscreen" value="true" />
<platform name="android">
    <allow-intent href="market:*" />
    <icon density="ldpi" src="res/android/ldpi.png" />
    <icon density="mdpi" src="res/android/mdpi.png" />
    <icon density="hdpi" src="res/android/hdpi.png" />
    <icon density="xhdpi" src="res/android/xhdpi.png" />
    <icon density="xxhdpi" src="res/android/xxhdpi.png" />
    <icon density="xxxhdpi" src="res/android/xxxhdpi.png" />
    <splash density="land-hdpi" src="res/screen/android/drawable-land-hdpi.png" />
    <splash density="land-ldpi" src="res/screen/android/drawable-land-ldpi.png" />
    <splash density="land-mdpi" src="res/screen/android/drawable-land-mdpi.png" />
    <splash density="land-xhdpi" src="res/screen/android/drawable-land-xhdpi.png" />
    <splash density="land-xxhdpi" src="res/screen/android/drawable-land-xxhdpi.png" />
    <splash density="land-xxxhdpi" src="res/screen/android/drawable-land-xxxhdpi.png" />
    <splash density="port-hdpi" src="res/screen/android/drawable-port-hdpi.png" />
    <splash density="port-ldpi" src="res/screen/android/drawable-port-ldpi.png" />
    <splash density="port-mdpi" src="res/screen/android/drawable-port-mdpi.png" />
    <splash density="port-xhdpi" src="res/screen/android/drawable-port-xhdpi.png" />
    <splash density="port-xxhdpi" src="res/screen/android/drawable-port-xxhdpi.png" />
    <splash density="port-xxxhdpi" src="res/screen/android/drawable-port-xxxhdpi.png" />
</platform>
<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <icon height="180" src="res/ios/icon-60@3x.png" width="180" />
    <icon height="60" src="res/ios/icon-60.png" width="60" />
    <icon height="120" src="res/ios/icon-60@2x.png" width="120" />
    <icon height="76" src="res/ios/icon-76.png" width="76" />
    <icon height="152" src="res/ios/icon-76@2x.png" width="152" />
    <icon height="40" src="res/ios/icon-40.png" width="40" />
    <icon height="80" src="res/ios/icon-40@2x.png" width="80" />
    <icon height="57" src="res/ios/icon.png" width="57" />
    <icon height="114" src="res/ios/icon@2x.png" width="114" />
    <icon height="72" src="res/ios/icon-72.png" width="72" />
    <icon height="144" src="res/ios/icon-72@2x.png" width="144" />
    <icon height="167" src="res/ios/icon-167.png" width="167" />
    <icon height="29" src="res/ios/icon-small.png" width="29" />
    <icon height="58" src="res/ios/icon-small@2x.png" width="58" />
    <icon height="50" src="res/ios/icon-50.png" width="50" />
    <icon height="100" src="res/ios/icon-50@2x.png" width="100" />
    <icon height="167" src="res/ios/icon-83.5@2x.png" width="167" />
    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
</platform>
<plugin name="cordova-plugin-file" spec="^5.0.0" />
<plugin name="cordova-plugin-ionic-webview" spec="^1.1.14" />
<plugin name="cordova-plugin-splashscreen" spec="^4.1.0" />
<plugin name="cordova-plugin-statusbar" spec="^2.2.2" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
<plugin name="cordova-plugin-screen-orientation" spec="^3.0.1" />
<engine name="ios" spec="^4.4.0" />
Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Bobby
  • 51
  • 1
  • 2
  • Could be to do with RAM management, power saving modes etc... You can replicate the same behaviour on native apps too. If the app has been in the background for a while, the OS will reload it when it's back in the foreground. – Abdul Sadik Yalcin Jul 12 '18 at 14:30
  • Thanks for the tip! It does seem related to RAM - perhaps iOS12 limits are different. For my app, it never goes into the background, it stays in the foreground but still reloads. After some more research, it could be that I have too many GPU CSS transforms which crashes the wkWebView, or the JS memory usage is too high and tips it over the edge on iOS 12. – Bobby Jul 13 '18 at 14:28
  • 1
    I've seen Cordova re-load itself when encountering memory pressure... e.g. I had a memory leak in the back end which eventually caused Cordova to re-load the web view which then leads to a hard crash for us (as it left us in a terrible state). – joeybladb Mar 26 '19 at 00:00
  • We noticed this problem on the same config (iPhone X on iOS12) when we had used -webkit-backdrop-filter: blur() in the CSS. Removing it fixed our crashes. – Valentin Klinghammer Apr 04 '19 at 10:50

1 Answers1

0

We also hit this issue with our Cordova app, and it took us ages to solve.

After recently switching to wkwebview, a file uploader page in the app started reloading often before the file uploads completed. It only happened for users with iPhone X & iOS 12. In our case, changing a Bootstrap spinner control resolved things. Seems crazy... but once we modified the component, the problem went away.

Stephen Smith
  • 1