Ionic Angular Application does not show the data after few hours of inactivity in iOS

Ionic Framework Ionic Angular
1

I am developing an application in ionic 7 with angular 17.0.2 with Cordova Plugins.
My application provides notification by following a process. I am displaying the countdown for the next notification once the process starts. The issue I am facing here is when I open the application after few hours of inactivity of the application the component showing the countdown is set to 0h 0d 0m instead of showing actual time left. When this issue occurs if I remove the application from the background and on opening the app again the timer shows proper timings.
Below is the constructor block of my ionic page where I have the countdown and the Bindclassvar() is to change the image based on the value from ionic storage.

constructor(public plt: Platform, public navCtrl: NavController, public CommonProvider: ConvertProvider, public OfflineDb: OfflinedbProvider,
public LocalStorage: Storage, private loadingCtrl: LoadingController,
public localnotification: LocalNotifications, private dateTimeProvider: PdatetimeProvider) {
this.count = 0;
this.DeadlineTime = this.dateTimeProvider.getCurretntDateTimeinMillisecs();

this.nowDateTime = this.dateTimeProvider.getCurretntDateTimeinMillisecs();
this.Days = "0";
this.Hours = "0";
this.Mins = "0";
Promise.resolve([])
  .then(x => this.Bindclassvar())
  .catch(err => { throw new Error('Error -' + err); })

}

Bindclassvar() {
return new Promise((resolve, reject) => {
this.LocalStorage.get(‘GuideType’).then(data => {
if (data) {
if (data == ‘Collin’) {
this.classVariable = ‘collin-nexttask’;
}
else {
this.classVariable = ‘colleen-nexttask’;
}
resolve(1);
}
else {
resolve(1);
}
}).catch(e => console.log(JSON.stringify(e)));
});
}

Image_1
Image_1827×315 26.5 KB

Image_2
Image_21080×437 36.6 KB

2

You need to make sure the countdown updates based on the current time whenever you open the app again by using a lifecycle method. This way, it will show the right remaining time. Also having some form of State Persistence is also necessary.

3

Hi I have tried implementing lifecycle event and also tried platform.resume both gives the same result, and I have added a setInterval function to update the countdown every second. The primary thing here is this issue is happening only in iOS, in android there is not such issue if the app is inactive for too long and when opened it’ll load as expected.

4

A setInterval may not function properly when the app is backgrounded, leading to discrepancies in the displayed time when the app is reopened.

5

setTimeout and setInterval is not working if the app is in background mode for a while. Because OS is try to optimize device’s battery and performance. So you should use either of storing your start time and re-calculate when the app is resume, or use the plugin something like Background Runner Capacitor Plugin API | Capacitor Documentation .

6

Hi, I am storing the time and that time is retrieved in the lifecycle event (ionViewWillEnter()), also I tried retrieving the time value from constructor, also I have added the function to retrieve the time both on constructor and lifecycle event but none of them worked. There are also few buttons which on clicked should navigate to another page and show dynamic content as well as static content but when after few hours of inactivity and when no values for countdown if I navigate to other page, I am able to only see the static content and not dynamic ones.
Note:- this issue is only seen in iPhone users not in iPad.
Also @hanho as I am using cordova plugins is it better to use https://github.com/katzer/cordova-plugin-background-mode instead of the capacitor one .

7

Why you are retrieving time from ionViewWillEnter lifecycle or constructor? They are not fired when you back from background mode. lifecycle or constructor is running on the webview’s main thread, which means they cannot tell the device’s current state.

Using plugin is right option (cordova-background-mode or maybe there might be some cordova plugin for listen pause / resume states).

Also, you should think about the “refresh” of the page, iOS is not only stop the setInterval, but also can restart(refresh) the application when you backed after long time passed. It might be make you think ionViewWillEnter was triggered when you get back. That is because the application has been reloaded from the beginning not ionViewWillEnter is triggered again.

1 Like