Dismissing modal when app is on background

Background:
I am currently using ng-idle/core to detect if my user is inactive. When the idle interval is reached, a modal would show up that shows a 2 mins timer and gives the user an option to ‘Keep them logged in’ or ‘Logout’. If the 2 mins timer lapsed, the modal will be dismissed and the user will be logged out.

Scenario:
If a user logs in and put the app on background/Lock their phone, the idle time still works (which is great). But it the user still doesn’t opened the application and the 2 mins timer lapsed (While the app is on background), by the time they opened the application they are already logged out (Again, which is good) but the modal is still there.

Solutions I tried:

  1. I already tried to dismiss the modal using id [code below]. But it throws an error where it says overlay does not exist
this.modalController.dismiss(undefined, undefined, 'timeout_modal')
  1. I also tried wrapping it up inside a zone but still doesn’'t work
this.zone.runOutsideAngular(() => this.modalController.dismiss(undefined, undefined, 'timeout_modal'));

Question:
Is ionic modals can’t really be dismissed when the app is inactive? Is there something wrong on my approach?

I might be wrong, but from my understanding, the ng-idle/core only detects if user is inactive, not when app is no longer working right?

If you are dismissing the modal from the modal itself, I believe this.modalController.dismiss() is sufficient to dismiss a modal from my understanding.

If you want to dismiss the modal from somewhere else:

Method 1: EventEmitter
You might need to link it up with an EventEmitter and you can emit a signal so that the event is heard and the modal is dismissed with this.modalController.dismiss() if the event is happening elsewhere

Method 2: StateManagers subscription
You could also use state managers like NGXS or NGRX to watch for changes and dismiss the modal with this.modalController.dismiss() if the condition in the state changes.

Hi @razmans , method 1 and method 2 might not work since the app is on background.

You can recreate my problem, by creating a timer that will close a modal when the timer ends. But after the timer started, close you phone or put the app on background. Wait a few seconds so that the timer will end and when you open the application again, you will notice that the this.modalController.dismiss() is called but the modal was not dismissed

My workaround for now is that I have a this.modalController.dismiss() in my ionViewDidEnter, it will dismiss any active modal when the user opened the app again. My workaround is still good on my end since it is the only modal that will on show on a certain page.

1 Like

have you tried something like:

App.addListener('appStateChange', ({ !isActive }) => {
  // close your modal
});
1 Like