Android hardware back button has slow response, if any

Capacitor
1

I have an Angular app using Capacitor without the Ionic framework. I listed the dependencies below. My issue is the Android hardware back button. For some reason when you push the back button is takes about 5 seconds for the app to go back to the last route/view. Sometimes it freezes and doesn’t load the icons but instead the icons text. At first I had no app listener. Next, I tried the following code:

App.addListener(‘backButton’, ({ canGoBack }) => {
if (!canGoBack) {
App.exitApp();
} else {
window.history.back();
}
});

Then I tried using document.addEventListener(‘backbutton’, myFunction, false);

Nothing has worked. So I am currently using the code: App.addListener(‘backButton’, () => null); to disable the back button which sucks.

The only thing I can think of is Capacitor doesn’t like something with Angular Material or I need to convert my routing to a lazy loading. Currently I am only using one module for routing. I was thinking maybe the back button is causing the app to reload or something.

Any help would be appreciated. I could maybe send a Google Play app sharing link with the back button enabled so you can see the behavior.

Please let me know if you need any further specs or details.

Thanks!

“dependencies”: {
“@angular/animations”: “~12.1.0”,
“@angular/cdk”: “^12.1.0”,
“@angular/common”: “~12.1.0”,
“@angular/compiler”: “~12.1.0”,
“@angular/core”: “~12.1.0”,
“@angular/flex-layout”: “^12.0.0-beta.34”,
“@angular/forms”: “~12.1.0”,
“@angular/material”: “^12.1.0”,
“@angular/platform-browser”: “~12.1.0”,
“@angular/platform-browser-dynamic”: “~12.1.0”,
“@angular/router”: “~12.1.0”,
“@capacitor/android”: “^3.2.3”,
“@capacitor/angular”: “^1.0.3”,
“@capacitor/app”: “^1.0.5”,
“@capacitor/clipboard”: “^1.0.3”,
“@capacitor/core”: “^3.2.3”,
“@capacitor/haptics”: “^1.1.2”,
“@capacitor/ios”: “^3.2.3”,
“@capacitor/keyboard”: “^1.1.2”,
“@capacitor/push-notifications”: “^1.0.7”,
“@capacitor/share”: “^1.0.4”,
“@capacitor/splash-screen”: “^1.1.0”,
“@capacitor/status-bar”: “^1.0.5”,
“cordova-plugin-screen-orientation”: “^3.0.2”,
“es6-promise-plugin”: “^4.2.2”,
“ngx-pull-to-refresh”: “^11.1.21”,
“rxjs”: “~6.6.7”,
“tslib”: “^2.0.0”,
“zone.js”: “~0.11.4”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “~12.1.0”,
“@angular/cli”: “^12.1.0”,
“@angular/compiler-cli”: “~12.1.0”,
“@angular/language-service”: “~12.1.0”,
“@capacitor/cli”: “^3.3.3”,
“@types/jasmine”: “~3.6.0”,
“@types/jasminewd2”: “~2.0.3”,
“@types/node”: “^12.11.1”,
“codelyzer”: “^6.0.0”,
“jasmine-core”: “~3.6.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“karma”: “~6.3.4”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage-istanbul-reporter”: “~3.0.2”,
“karma-jasmine”: “~4.0.0”,
“karma-jasmine-html-reporter”: “^1.5.0”,
“protractor”: “~7.0.0”,
“ts-node”: “~7.0.0”,
“tslint”: “~6.1.0”,
“typescript”: “~4.3.4”
}

2

A couple of questions:

  • Are you testing this on the emulator or on a physical device?
  • Is this a hardware back button or a software back button on the touch screen?
  • If you add a console.log("hello back button") or something in the first line of the BackButtonListener, is there still the lag?

I have sometimes seen a bit of a lag closing the application with the back button before, but that can happen in many Android apps, not just Capacitor ones. It uses Activity.finish() to close the app out, which can be slow in some cases unrelated to your application itself.

3

Thanks for your response thomas!
-I’m testing on emulator and physical device. Both results are same.
-The issue is with the hardware back button. The software back buttons have no issues.
-I tried the console.log test and same response. I also tried alert() and it displays immediately but back() is still slow.

4

I facing same problem , do you have any solution to solve this? Thanks