Backbutton event not fired

Capacitor
1

Hello,

I am using ionic 5.4.16 and Capacitor.

I have a problem since the beginning with my application on Android :

  • When I press the backbutton of my phone, the app is immediately closed
  • The events are not trigger. See examples :
this.platform.ready().then(() => {
      console.log('PLATFORM READY')
      document.addEventListener("backbutton", () => { 
        this.routerOutlets.forEach(async(outlet: IonRouterOutlet) => {
          console.log('BACKBUTTON')
        });
      });
      this.platform.backButton.subscribeWithPriority(0, () => {
          console.log('BACKBUTTON 2')
      });
    });

‘PLATFORM READY’ is displayed when the app start but when I press the back button, ‘BACKBUTTON’ is not displayed, the app is closed.

When I press the button, I have theses logs :

2021-12-25 10:01:22.641 25687-25801/MYAPP I/GED: ged_boost_gpu_freq, level 100, eOrigin 2, final_idx 31, oppidx_max 31, oppidx_min 0
2021-12-25 10:01:22.720 25687-25687/MYAPP W/ContentCatcher: Failed to notify a WebView
2021-12-25 10:01:22.785 25687-25901/MYAPP I/GED: ged_boost_gpu_freq, level 100, eOrigin 2, final_idx 31, oppidx_max 31, oppidx_min 0
2021-12-25 10:01:22.795 25687-25801/MYAPP I/GED: ged_boost_gpu_freq, level 100, eOrigin 2, final_idx 31, oppidx_max 31, oppidx_min 0
2021-12-25 10:01:22.912 25687-25901/com MYAPP Failed to notify a WebView I/GED: ged_boost_gpu_freq, level 100, eOrigin 2, final_idx 31, oppidx_max 31, oppidx_min 0
2021-12-25 10:01:23.003 25687-25687/MYAPP W/Looper: Slow Looper main: doFrame is 314ms late because of 1 msg, msg 1 took 179ms (seq=1233 running=47ms runnable=8ms io=109ms late=108ms h=android.app.ActivityThread$H w=159)

Maybe “Failed to notify a WebView” is an idea ?

What am I doing wrong ? is there something specific to do in order to have this event ?

Thank you in advance

2

Have you added @capacitor/app ?

3

Yes “nom install @capacitor/app” give the result “up to date”

I am running Android studio with the command : “ionic capacitor run android”

In case I have re-done
npm install @capacitor/core @capacitor/cli
nothing new has been installed.

npx cap add android
[error] android platform already exists.
4

As soon as i can i will share some code, it allows you to enable the hardware back button

5 
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { Subscription } from 'rxjs';


@Component({
  selector: 'app-mainpage',
  templateUrl: './mainpage.page.html',
  styleUrls: ['./mainpage.page.scss'],
})
export class HomePage {
  backButtonSub: Subscription;
  constructor(
    private platform: Platform,
  ) { }

  ionViewWillEnter() {
    this.backButtonSub = this.platform.backButton.subscribeWithPriority(
      10000,
      () => { }
    );
  }

  ionViewWillLeave() {
    this.backButtonSub.unsubscribe();
  }

}


with this you can enable the hardware backbutton in capacitor apps
6

Thank you ciccilleju,

Your code is not working in my apps but I have created a new fresh apps and it’s working. Something is wrong in my apps, I will continu to investigate and keep you inform.

7

Doesn’t work, how? The button or it gives you some error?
Let me know :slight_smile:

8

The event was not triggered …

I have solved my problem with this method :

  • create a new capacitor app
  • copy the new app into the old
  • re-set the configuration of my app (install packages, set the app’s name …) it took me 2 hours.

Finally the backbutten is working !

My app was my first ionic’s app, I have made a lot of mistake at the beginning, I think the capacitor configuration was invalid but I can’t tell what was invalid.

9

ok, the most important thing is that, at the end, you’ve made it work :slight_smile:

feel free to contact me if you need any further help, i’m not a “pro” but i’ve used ionic / angular a lot in these last 2 years

1 Like