bug: Back button inconsistency in PWA

[tanoabeleyra]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
Hardware back button in a PWA isn't consistent with the software button (ion-back-button)

Expected behavior:
The hardware back button should pop from the stack instead of navigating back in history. Or at least it should be an option to work in this way.

Steps to reproduce:
In this first GIF I show the behaviour of the software button, which is right.

In this second GIF I show the behaviour of the hardware button (I'm using a web browser but the result is the same as pressing the back button on an Android device).

I know this is probably part of #16611 but the issue is locked since April and I wanted to know if there's at least a workaround for this. I can't release my app with this behaviour, it would be really confusing for the users (UX).

[tanoabeleyra]

The back/forward button here refers to the hardware button.

After many trials and errors I made a workaround, I detect when the back button is pressed and replace the default navigation with a navController.pop(). This solves the issue shown in the GIF.

But there are some problems:

• The forward button doesn't work
• Going back from a root page should close the app (with optional confirmation).

Anyway, if someone is interested here is a repo showing my workaround: https://github.com/tanoabeleyra/ionic-back-button-workaround

[liamdebeasi]

Thanks for the issue! I linked this issue with the main Android back button issue thread. I am going to close this issue in favor of that one so things don't get too cluttered.

Feel free to follow that main thread for updates. Thanks!

[tanoabeleyra]

Ok, not really encouraging but thanks. With so many bugs related to the back button, even as a Cordova app, I can't consider it production-ready.

[JoseGeorges8]

I don't understand how this is happening. My app has been in the app store for a while now and everything was sailing smooth. However, google threw an update on Firebase that messed up the firebase plugin. Due to that I need to use a fork version which needs Cordova 9.0.0 So I updated Cordova plus another couple plugins that stopped workin on iOS (webview being one of them) Now that I finally got the app building on both platforms, my logic for the back button does not work anymore!!! The subscription doesn't seem to get subscribed properly I dont even know how to deal with it. From the root of my app, pressing the back button btings the user to a blank screen and a dialog shows with an Alert message.

This is the logic that I had on the app (tab based app)

ionViewDidEnter() { this.subscription = this.platform.backButton.subscribe(() => { console.log('back button pressed'); navigator['app'].exitApp(); }); }

Then I tried:
ionViewDidEnter() { this.subscription = this.platform.backButton.subscribeWithPriority(999999, () => { console.log('back button pressed'); navigator['app'].exitApp(); }); }

However none of them work!

[liamdebeasi]

@JoseGeorges8, Did you also update your version of the framework? There was a bug introduced in 4.6.1 that broke some back button functionality. I recommend installing 4.6.0 and seeing if that works. We are working on a fix for this bug.

[tanoabeleyra]

@liamdebeasi I can confirm, the hardware back button doesn't work as expected in Ionic 4.6.2 as a Cordova app (no pop, no closing overlays). I downgraded to 4.6.0 and the back button is working better but that version has several other bugs (like the infinite scroll not working at all). Could you please test before releasing?, what's the rush? Major bugs are being introduced within each release.

[liamdebeasi]

@tanoabeleyra,

The back button issues you are describing are long standing issues with the hardware back button and were not bugs introduced in Ionic 4.6.0. Additionally, the infinite scroll bug you referenced has already been resolved and is available in Ionic 4.6.1.

Ionic 4.6.0 allowed us to add the Stencil One update which was a big refactor of Stencil that brought some great performance improvements. We do thoroughly test each of our releases, but unfortunately sometimes there are bugs that slip through. We have addressed a majority of the Ionic 4.6 issues in the 4.6.1 and 4.6.2 releases.

If you are encountering new issues that have not already been reported, please create a new issue. Thanks!