Ionic Lifecycle when Leaving or Coming back to the app

Ionic Framework Ionic Vue
1

Hi guys,

I have a question, when I leave the app to the homescreen on IOS or when i come back to the app from the homescreen, not any event is triggered in the app.

  ionViewDidEnter() {
    console.log('Home page did enter');
  },
  ionViewDidLeave() {
    console.log('Home page did leave');
  },
  ionViewWillEnter() {
    console.log('Home page will enter');
  },
  ionViewWillLeave() {
    console.log('Home page will leave');
  },

Is there any way to be able to know what happen in this case ? Currently, when I leave the app, everything is stopped inside my app and when i come back, it does not work again and the app is like frozen.

Thanks in advance for an answer

2

Those lifecycle events only fire during Vue’s routing. Since closing the app (or it going to the background) and coming back to the foreground doesn’t cause a navigation, those don’t get fired.

You would need to use Capacitor’s App plugin. The appStateChange is a good choice.

As a heads up that I just discovered, appStateChange doesn’t fire when the app initially starts up. So, you need to run any logic that you have when the state becomes active outside of this event as well.

Here is my code.

app-listeners.ts

import { App } from '@capacitor/app'

export class AppListeners {
    public static async initialize() {
        await App.removeAllListeners()

        App.addListener('appStateChange', ({ isActive }) => {
            if (isActive) {
                AppListeners.handleIsActive()
            } else {
                AppListeners.handleIsNotActive()
            }
        })

        // Call initially when the app has a fresh start
        AppListeners.handleIsActive()
    }

    private static handleIsActive(): void {
        // Do active stuff
    }

    private static handleIsNotActive(): void {
        // Do not active stuff
    }
}

main.ts

// Other stuff

// Call here
AppListeners.initialize()

const app = createApp(App)
    .use(IonicVue, {
        innerHTMLTemplatesEnabled: true,
    })
    .use(router)

router.isReady().then(async () => {
    app.mount('#app')
})
3

Thanks for your answer, I will try it out and keep you updated ! Thanks

4

Works perfectly ! Thanks !

1 Like