API-/Backend-Requests stop working after app suspended

[Mike1707]

Hey Guys,

after upgrading vom UiWebView to WkWebView 2.2.x I noticed the following on my iOS device.

The app starts normally and works fine in foreground. When I lock my screen and immediately unlock it, it works also. After waiting a few minutes for the app to be suspended and opening the app again in foreground, all my backend calls stop working. The problem: I don't get any http errors or something similar. They just stop working and the JavaScript Code will not be executed further.

If I delete <preference name="WKSuspendInBackground" value="false" /> it works again as expected.

I used WkWebView in the past but had to stop using it due to conflicts with background geolocation tracking; but this bug is new. If I downgrade again to UiWebView everything works again.

The following code snipped is interesting:

private async getPack(): Promise<void> {

    try {
        console.log('here some javascript logs'); // THIS WORKS

        const friends = await this.packService.getFriendsForDog(this.dogService.mainDog.id, 10000, 0).toPromise(); // my API call with Angular HttpClient get()

        console.log('here after api call'); // THIS DOES NOT WORK
    } catch (err) {
        console.error(err); // WILL NOT BE CALLED EITHER
    }
}

The getFriendsForDog-Method:

getFriendsForDog(dogId: number, limit: number, skip: number): Observable<Friendship[]> {
    return this.http.get<Friendship[]>(this.baseUrl + this.relativeUrl + 'own?dogId=' + dogId + '&accepted=true&limit=' + limit + '&skip=' + skip);
  }

The following logs are posted in the XCode console (I deleted the debug Google Analytics logs):

2018-11-13 16:06:37.578678+0100 MyAppDev[5901:1895120] Apache Cordova native platform version 4.5.5 is starting.
2018-11-13 16:06:37.579159+0100 MyAppDev[5901:1895120] Multi-tasking -> Device: YES, App: YES
2018-11-13 16:06:37.585646+0100 MyAppDev[5901:1895120] CDVWKWebViewEngine: Suspend in background disabled
2018-11-13 16:06:37.587622+0100 MyAppDev[5901:1895120] CDVWKWebViewEngine: trying to inject XHR polyfill
2018-11-13 16:06:37.657400+0100 MyAppDev[5901:1895120] CDVWKWebViewEngine will reload WKWebView if required on resume
2018-11-13 16:06:37.657478+0100 MyAppDev[5901:1895120] Using Ionic WKWebView
2018-11-13 16:06:37.658902+0100 MyAppDev[5901:1895120] [CDVTimer][console] 0.337005ms
2018-11-13 16:06:37.659104+0100 MyAppDev[5901:1895120] [CDVTimer][handleopenurl] 0.066996ms
2018-11-13 16:06:37.661050+0100 MyAppDev[5901:1895120] [CDVTimer][intentandnavigationfilter] 1.882911ms
2018-11-13 16:06:37.661126+0100 MyAppDev[5901:1895120] [CDVTimer][gesturehandler] 0.045061ms
2018-11-13 16:06:37.665647+0100 MyAppDev[5901:1895120] [CDVTimer][splashscreen] 4.495025ms
2018-11-13 16:06:37.668211+0100 MyAppDev[5901:1895120] [CDVTimer][statusbar] 2.498984ms
2018-11-13 16:06:37.668309+0100 MyAppDev[5901:1895120] CDVIonicKeyboard: resize mode 3
2018-11-13 16:06:37.669309+0100 MyAppDev[5901:1895120] [CDVTimer][keyboard] 1.017928ms
2018-11-13 16:06:37.669436+0100 MyAppDev[5901:1895120] [CDVTimer][backgroundfetch] 0.073075ms
2018-11-13 16:06:37.669462+0100 MyAppDev[5901:1895120] [CDVTimer][TotalPluginStartup] 11.021018ms
2018-11-13 16:06:38.316358+0100 MyAppDev[5901:1895120] Ionic Native: deviceready event fired after 419 ms
2018-11-13 16:06:38.895989+0100 MyAppDev[5901:1895190] Reachability Flag Status: -R ------- networkStatusForFlags
2018-11-13 16:06:44.451518+0100 MyAppDev[5901:1895204] Reachability Flag Status: -R ------- networkStatusForFlags
2018-11-13 16:09:39.164321+0100 MyAppDev[5901:1895120] [ProcessSuspension] Background task expired while holding WebKit ProcessAssertion (isMainThread? 1).
2018-11-13 16:09:50.407928+0100 MyAppDev[5901:1895120] CDVWKWebViewEngine shouldReloadWebView::
2018-11-13 16:09:50.408094+0100 MyAppDev[5901:1895120] CDVWKWebViewEngine shouldReloadWebView title: MyApp
2018-11-13 16:09:50.408123+0100 MyAppDev[5901:1895120] CDVWKWebViewEngine shouldReloadWebView location: http://localhost:8080/#/tabs/tab-0/dog-account
2018-11-13 16:09:50.408144+0100 MyAppDev[5901:1895120] CDVWKWebViewEngine shouldReloadWebView reload: 0
2018-11-13 16:09:50.411559+0100 MyAppDev[5901:1895566] Reachability Flag Status: -R ------- networkStatusForFlags
2018-11-13 16:09:54.046119+0100 MyAppDev[5901:1895120] here some javascript logs

Ionic Info:

Ionic:

   ionic (Ionic CLI)  : 4.3.1 (/Users/mike/.nvm/versions/node/v10.11.0/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.3, (and 13 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/mike/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v10.11.0 (/Users/mike/.nvm/versions/node/v10.11.0/bin/node)
   npm               : 6.4.1
   OS                : macOS
   Xcode             : Xcode 10.1 Build version 10B61

Cordova Plugins:

cordova-background-geolocation 2.13.2 "BackgroundGeolocation"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-appsee 2.4.13 "Appsee"
cordova-plugin-background-fetch 5.4.1 "CDVBackgroundFetch"
cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-cocoalumberjack 0.0.4 "CocoaLumberjack"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-dialogs 2.0.1 "Notification"
cordova-plugin-google-analytics 1.8.3 "Google Universal Analytics Plugin"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.2.3 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

Config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget android-packageName="foo.bar" defaultlocale="de-DE" ios-CFBundleIdentifier="foo.bar" ios-CFBundleVersion="1" version="1.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>MyAppDev</name>
    <description>MyApp Ionic App.</description>
    <author email="info@myapp.com" href="https://www.myapp.com/">MyApp</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="http://localhost:8080/*" />
    <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="Orientation" value="portrait" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="android-targetSdkVersion" value="27" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="KeyboardResizeMode" value="ionic" />
    <preference name="loadUrlTimeoutValue" value="90000" />
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <preference name="WKSuspendInBackground" value="false" />
    <platform name="android">
        <allow-intent href="market:*" />
        <!-- omitted the icon/splashscreen entries -->
        <!-- ... -->
    </platform>
    <platform name="ios">
        <hook src="tools/removeAdFramework.js" type="after_prepare" />
        <edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
            <string>Damit du Bilder hochladen kannst, muss MyApp auf deine Kamera zugreifen.</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
            <string>Damit du Bilder hochladen kannst, muss MyApp auf deine Photo-Library zugreifen.</string>
        </edit-config>
        <preference name="deployment-target" value="10.0" />
        <preference name="target-device" value="handset" />
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <!-- omitted the icon/splashscreen entries -->
        <!-- ... -->
    </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-statusbar" spec="^2.4.2" />
    <plugin name="cordova-plugin-dialogs" spec="^2.0.1" />
    <plugin name="cordova-plugin-app-version" spec="^0.1.9" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.3" />
    <plugin name="cordova-plugin-camera" spec="^4.0.3">
        <variable name="CAMERA_USAGE_DESCRIPTION" value="Damit du Bilder hochladen kannst, muss MyApp auf deine Kamera zugreifen." />
        <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="Damit du Bilder hochladen kannst, muss MyApp auf deine Photo-Library zugreifen." />
    </plugin>
    <plugin name="cordova-plugin-browsertab" spec="^0.2.0" />
    <plugin name="cordova-background-geolocation" spec="git+https://github.com/transistorsoft/cordova-background-geolocation.git#2.13.2">
        <variable name="LICENSE" value="FOOBAR" />
        <variable name="GOOGLE_API_VERSION" value="16.0.0" />
        <variable name="APPCOMPAT_VERSION" value="27.1.1" />
        <variable name="MOTION_USAGE_DESCRIPTION" value="Die Benutzung des Beschleunigungssensors reduziert deinen Akkuverbrauch enorm, da die GPS Funktion erst bei Bewegung aktiviert wird." />
        <variable name="LOCATION_ALWAYS_AND_WHEN_IN_USE_USAGE_DESCRIPTION" value="Damit du deine Gassirunde tracken kannst, muss MyApp immer auf deinen Standort zugreifen können." />
        <variable name="LOCATION_ALWAYS_USAGE_DESCRIPTION" value="Damit du deine Gassirunde tracken kannst, muss MyApp immer auf deinen Standort zugreifen können." />
        <variable name="LOCATION_WHEN_IN_USE_USAGE_DESCRIPTION" value="Damit du deine Gassirunde tracken kannst, muss MyApp immer auf deinen Standort zugreifen können." />
        <variable name="BACKGROUND_MODE_LOCATION" value="&lt;string&gt;location&lt;/string&gt;" />
    </plugin>
    <plugin name="cordova-plugin-google-analytics" spec="1.8.3" />
    <plugin name="cordova-plugin-appsee" spec="2.4.14" />
    <plugin name="cordova-plugin-ionic-webview" spec="2.2.3" />
    <engine name="ios" spec="4.5.5" />
    <engine name="android" spec="7.1.2" />
</widget>

If you need further information please feel free to ask. I appreciate any help! Thanks Mike

[karlbohlmark]

I've started getting this problem as well (but using the regular WkWebView). I think this is an iOS 12 (or maybe even 12.1) issue, because after upgrading to iOS 12 I get this problem on older versions of my app as well. Don't know of any workaround yet.

[dylanvdmerwe]

Latest version of wkwebview plugin is causing inconsistent behaviour as described above with apps in the background or needing to restart. Especially with cordova-background-geolocation-lt.

[Mike1707]

With Version 2.3.1 and iOS 12.1 it's still broken.

[dylanvdmerwe]

@Mike1707 I was asked if you could please provide a repo so that this can be further looked into.

[Mike1707]

@dylanvdmerwe I started a new Ionic project and added successively some cordova plugins and npm packages I use in my main project. I used the tabs template and modified it to use a custom component, a backendService provider and ionic lazy loading as I do it in my main project. I'm not sure if this needs to be done necessarily.

I was able to reproduce the bug using the @auth0/angular-jwt@1.2.0 package. I used the configuration for Ionic 2+. Therefore, I use also the @ionic/storage which can be a starting point for further looks into as well. When I delete this plugin and configurations related to this plugin it works again.

I pushed the code to this public repo: https://github.com/Mike1707/webviewdemo

I do the following to reproduce the bug:

1. Checkout, npm install, ionic cordova platform add ios --no-resources, ionic cordova prepare ios
2. Start the project on an iOS device with Xcode.
3. After starting, some JSON should be printed on the console I fetch from https://jsonplaceholder.typicode.com/posts. You can also use the "Get posts" button for this.
4. Then, bring the app to the background and wait for the app to be suspended (I use the "Energy Impact" monitor in Xcode for this)
5. Open the app again and click the "Get posts" button. Now nothing should happen.

Unfortunately, I have no idea how to dig deeper into this issue from this point. Therefore, I would appreciate your help!

Thanks in advance!

[Mike1707]

At first glance, after upgrading to 3.0.0 the issue seems to be fixed. I will run more tests and report.

[giladrom]

I can confirm that this issue is not resolved after upgrading to 3.1.2.

[Mike1707]

@giladrom for me it‘s resolved after upgrading to >3.0.0. I use 3.1.2 as well.

Did you try <preference name="WKSuspendInBackground" value="false" /> ?

[giladrom]

@Mike1707 yeah, I tried it last night. No change.

[buleglay]

I seem to have the same issue with WKWebView in iOS 12+, I’m working on Apple Wallet feature and using cordova-apple-wallet plugin. It works fine in iOS 11 tho.

[jcesarmobile]

People is starting to mix different issues here. The original issue was when using <preference name="WKSuspendInBackground" value="false" />. That preference is gone on 2.4.0 and 4.0.0, so going to close the issue.