How to perform cleanup task when app is force closed by user

Ionic Framework Ionic Angular
1

I need to perform cleanup task when app is force closed by user (by swiping up). The scenario is:
I am using MusicControls plugin to display controls in the notification area. When the user closes the app by swiping, I want to destroy the Music Controls from the notification and lock screen. Currently, the musci controls remain in the lock screen area even after the app is closed.
Currently I am trying for android with Ionic 5 & Angular.
Here are few of the things I have tried:

  1. Called the cleanup code (which destroys the Music Controls) in ngOnDestory in app.component.ts. Does not work.
  2. Registered window listener of beforeunload/ unload within this.plaform.ready and called cleanup code within the listener
  3. Used @HostListener as suggested in some sites.

Here are the code snippets from my attempts:
Attempt 1:

ngOnDestroy() { 
    this.cleanUp();
}

Attempt 2:

this.platform.ready().then(() => {
      window.addEventListener('beforeunload', () => {
        // is called when app is forced and closed
        console.log('Before unload is called, destroy controls here');
        this.cleanUp();
      });
}

Attempt 3:

@HostListener('window:beforeunload', ['$event'])
beforeUnloadHander(event) {
 this.cleanUp();
    return false;
}

I have tried attempt 2 and attempt 3 with unload as well as beforeunload.
None of these work for me. Is there anything that I am doing wrong? This is very important, since the music controls is just hanging there and it can’t be dismissed by the user either.

Here is my musiccontrols configuration in case it is useful:

this.musicControls.create({
      track: title,
      artist: artist,
      isPlaying: true,
      hasPrev: hasPrev,
      hasNext: hasNext,
      hasClose: true,
      dismissable: true,

      playIcon: 'media_play',
      pauseIcon: 'media_pause',
      prevIcon: 'media_prev',
      nextIcon: 'media_next',
      closeIcon: 'media_close',
      notificationIcon: 'notification'
    });

Any help appreciated.
Thank you in advance.
This is my first post here, I hope I have followed the protocols correctly.

1 Like
2

My initial instinct is that you ask for the impossible, but you can try listening to the platform’s pause event. If you aren’t reliably seeing that event, I don’t think there is anything more you can do from the JavaScript side of the things. You would need to investigate platform-specific solutions.

3

Yes, I am able to track the App Pause event. But I am using Music Controls plugin.
In case of Music Controls, I want it to be displayed in lock screen even when user moves away from the app screen i.e, when the app is Paused but want it to go away when app is closed. Is there a way out for this?

4

I do not believe there is anything beyond the pause event that is catchable by any JavaScript code. When the app is force-closed, the whole browser goes away, and there is to my knowledge no standard method for browsers to inform web pages (which is fundamentally what your Ionic app is from the browser’s POV) that it is going to die.

1 Like
5

You can use this plugin as per your requirement

It’s give you time to run your function when user force closed your application.

1 Like
6

Thank you for this solution. Unfortunately, I am on Cordova and not using Capacitor. Makes me wonder whether I should shift to Capacitor soon.

7

Hi,
You can use this plugin

1 Like
8

Thank you for suggesting this plugin, but I am unable to get it to work.
I got it installed and wrote the following code for android in the ngOnInit of app.component.ts

document.addEventListener('destroy', function () {
      setTimeout(() =>{
      // clean up task
    }, 100);
      //return true;
  });

I have called a function to clean up within the setTimeout call. The clean up task is never called. Please let me know where I am going wrong.
Initially I tried without setTimeout, that also did not work.

Any help appreciated.

9

Got this working. Thanks a lot for suggesting this plugin.
I had to invoke the async call for cleanup and then had to call a setTimeout for 2 seconds, to wait for the async call to finish.
I did a trial and error and found that 2 seconds was the minimum required time for the async call to finish, on an average.
I also had to make changes to the initialize method in src/main/java/com/lisantra/lifecycle/CordovaPluginLifecycleEventsExtra.java
It is declared as private but the super class has it declared as public, so there was an error. Once I changed this to public, it worked.

Thank you again. Your help is deeply appreciated.

10

try- Write your music control stop logic in app component ngOnDestroy()

12

Just tried it out. It is not working. Not sure if ngOnDestroy of app.component is called at all when user swipes up and closes the app.

13

Turns out, after upgrade to android 12, ngOnDestroy is getting called I guess and Music control is getting destroyed. So, this worked.

14

Can you share code please ?