Capacitor Ios app frozen on Ios after screenlock

Question

I'm writing a cross-plattform application (Win / IOS / Web) and facing some strange freezes in the IOS application (IOS version 15.3.1 - also occured on lower versions). The problem arises when I close the app, keep it laying for around 5 seconds and then reopen it. However these freezes do only occasionally appear and the app manages after some time, between 10 seconds and 2 minutes, to recover. After the app has recovered it continues running as if nothing happend.

If I debug the app in Xcode and touch the frozen app user interface I get the following console output: App[449:19368][IPC] Connection::waitForSyncReply: Timed-out while waiting for reply for WebPage_touchEventSync from process 451, id=39

Unfortunately this error is not helping me a lot in the debugging process. So I started to uncomment the following parts of the application to identify the problematic part (without succes)

• SignalR connection (if the connection was terminated during the connection etc.)
• Fetching of data (if the app is getting suspended while fetching data)
• Watches:
  • DeviceOrientation.watchHeading().subscribe(...)
  • Geolocation.watchPosition(...) It seems like disabling the watches, fetching and the SignalR connection somehow reduces the possibility to freeze the app after coming from the background. Unfortunately the app still gets some times stuck.

Is anybody having an idea what could be the Problem?
I currently use the following package.json (but some of them are not used in the IOS build):

"dependencies": {
    "@babel/core": "^7.13.14",
    "@capacitor-community/electron": "^3.0.0-rc.6",
    "@capacitor-community/http": "^1.0.0",
    "@capacitor/app": "^1.0.5",
    "@capacitor/browser": "^1.0.5",
    "@capacitor/core": "^3.2.5",
    "@capacitor/device": "^1.0.5",
    "@capacitor/filesystem": "^1.0.5",
    "@capacitor/geolocation": "^1.1.2",
    "@capacitor/ios": "^3.2.5",
    "@capacitor/network": "^1.0.5",
    "@capacitor/push-notifications": "^1.0.6",
    "@capacitor/share": "^1.0.6",
    "@capacitor/splash-screen": "^1.1.5",
    "@craco/craco": "^6.0.0",
    "@ionic-native/device-orientation": "^5.36.0",
    "@ionic-native/file-opener": "^5.34.0",
    "@ionic-native/screen-orientation": "^5.36.0",
    "@ionic/pwa-elements": "^3.0.2",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@microsoft/signalr": "^3.1.6",
    "@reduxjs/toolkit": "^1.4.0",
    "axios": "^0.21.1",
    "axios-retry": "^3.2.0",
    "canvas": "^2.6.1",
    "capacitor-secure-storage-plugin": "^0.6.2",
    "cordova-plugin-device-orientation": "^2.0.1",
    "cordova-plugin-file-opener2": "^3.0.5",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "fibers": "^5.0.0",
    "i18next": "^19.6.2",
    "i18next-http-backend": "^1.0.21",
    "ionic-appauth": "^0.7.4",
    "node-sass": "^5.0.0",
    "notistack": "^1.0.5",
    "ol": "^6.3.1",
    "proj4": "^2.6.3",
    "react": "^17.0.1",
    "react-dnd": "^14.0.2",
    "react-dnd-html5-backend": "^14.0.0",
    "react-dnd-touch-backend": "^14.0.0",
    "react-dom": "^17.0.1",
    "react-file-viewer": "^1.2.1",
    "react-i18next": "^11.7.0",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-webcam": "^6.0.0",
    "redux": "^4.0.5",
    "sass": "^1.32.8",
    "type-fest": "^0.13.1",
    "uuid": "^8.3.1"
  }
}

Answer 1

i had a similar problem in my app (HU Reminder)... I was able to fix it by deleting '@ionic-native/background-mode' (not in use) and querying for the background mode if (in my case the connection to the DB) still exists... (app.component.ts)

import { Platform } from '@ionic/angular';


constructor(
    private platform: Platform,
    ...
  ) {
    this.setPlatformListener();
  }


async setPlatformListener() {

  // background mode
  this.platform.pause.subscribe(() => {
    console.log(' #### app is in background');
  });

  // foreground mode
  this.platform.resume.subscribe(async () => {

    console.log(' #### app is in Foreground: ' );

    if( 'check your code....' ) {

      console.log(' #### app is crashed -----!');
}

      await SplashScreen.show({ 
        showDuration: 1000,
        autoHide: true,
      });

     ... to do your code ...

    }
    else {

      console.log(' #### all is ready ...');       
               
    }

  });
}

hope I could help a little