Ionic-framework: Consolidated list of Android hardware back button issues

[dylanvdmerwe]

Describe the Bug
This is a list of functionality that must work with the Android hardware back button. I want to try and keep a list of them in one place so we can finally verify the hardware back button works correctly as this has been problematic since v2.

_The back button here refers to the hardware back button._

Web Browser

• [x] Back button to navigate back to previous view.
• [ ] (https://github.com/ionic-team/ionic/issues/15422) If a modal is open, back button to close/dismiss the modal.
• [ ] If more than one modal is open at a time, back button should dismiss modals in the order they were opened (stack).
• [ ] If a popup is open, the back button should dismiss any popup.
• [ ] If a popup is open on top of a modal, the popup should be dismissed first on back button press.
• [ ] Pressing back in a tabbed application should navigate the user backward across tabs. (for example: Tab 1 -> Page 1 -> Page 2 -> Tab 2 -> Page 3 -> back -> Page 2 -> back -> Page 1) (similar issue: https://github.com/ionic-team/ionic/issues/18721)
  
  
  
  • [ ] When side menu is open, back button should close the side menu before navigating.
  
  

Cordova/Capacitor

• [x] (similar: #17689 #17984 #20713) When on the root page, pressing the back button should close the app (standard Android behaviour)
  > This will be possible in Ionic Framework v5.1. There will also be docs added that will show how to do this.
• [x] (#19844) There should be an event that fires should the user want to show a confirmation popup before the back button closes the app.
  > This will be possible in Ionic Framework v5.1. There will also be docs added that will show how to do this.

Back button behaviour should be consistent between web and app (as per web list above)

Running in a Cordova/Capacitor app provides developers with additional tools to control the hardware back button functionality that does not exist in a web browser. For example, the ionBackButton event is only emitted in a Cordova/Capacitor app and is not emitted in a browser. As a result, hardware back button behavior when running in Cordova/Capacitor is currently not able to be perfectly aligned with the behavior when running that same app in a web browser; however, we will make the behavior as consistent as possible where appropriate.

• [x] (https://github.com/ionic-team/ionic/issues/16505) If a native view is opened (i.e. Camera), pressing back button should dismiss native view back into the webview. (for example: Page 1 -> Page 2 -> Open camera -> back -> camera closed onto Page 2)
  
  
  
  • [x] https://github.com/ionic-team/ionic/issues/20559 When side menu is open, back button should close the side menu before navigating.
  
  

#17589 back button not working with ion-button and href to page

This is the expected behavior. The hardware back button works within the context of your application’s navigation stack. Using href is going to cause a full page reload, thus emptying the stack. Similarly, if you did navController.navigateRoot, you probably would not then want the app to navigate to the previous page when tapping the hardware back button. Developers should try and stay within the scope of their framework’s routing solutions (I.e. using routerLink and related methods for Angular routing).

• [x] #17824 subscribeWithPriority not working properly w/ popups & higher priority levels
  > Fixed in Ionic Framework v5.1

Expected Behavior
Ultimately the user should not need to have to intervene with events, subscriptions or HostListener to handle back button navigation.

[olivermuc]

It would be nice to see some progress here as well, especially around camera use, as the camera is certainly one an often used device feature.

Currently, cancelling out of camera use is still "broken" per https://github.com/ionic-team/ionic/issues/16505

[Newbie012]

If the menu is open, then it should close it instead of going back to the previous view.

[amitairos]

Any update on these issues?

[amitairos]

Is there any update on any of these issues? Are they in progress? We're already in rc2...

[KevinKelchen]

Back button behaviour should be consistent between web and app (as per web list above)

I was expecting the ion-back-button to _also_ be consistent with web and app. I think it seems odd for someone using an Ionic app to experience different behaviors depending on whether they're using the hardware or software back button; it would probably confuse users.

FWIW, I posted a comment here outlining issues our team has had with ion-back-button's behavior.

[amitairos]

Is this issue being addressed? We're already in production, and there are still problems with this, in particularly with the web app/pwa

[alaa-alshamy]

this is so important issue, simply any overlay(alert/popover/modal/actionsheet/etc) should close when any back button clicked (browser back/android back button)

i think it's simple in the apps but in the web/pwa will be more difficult because we should work with the history state of the browser so push a new state when an overlay open and make back to remove the state when the overlay is close

i already made a complicated code to achieve this behavior in ionic 3

i hope u can fix this soon

[KevinKelchen]

I agree with the UX of the browser/Android back button dismissing a modal. If a modal was full-screen, for example, the user would probably expect it to work like a routed Component in that it "goes back to what was showing before"/dismisses.

At the same time, I think we'd want to be careful about an overlay's relationship to the browser history.

For example, if the history state was modified, how would that affect the Angular router with a CanDeactivate guard on the Page you launched the modal from? Perhaps you wouldn't want that to trigger (haven't tested if it would).

Also, I would not expect that overlays remain in the browser history stack. Imagine using browser back/forward and navigating to an entry in the history stack for an overlay. I would not expect the overlay to somehow re-launch, with its preserved state no less, nor would I expect the back/forward action to appear to do nothing which would probably make it feel broken and confusing to users. _Not_ modifying the browser history is actually one of the reasons our team has just migrated several Page Components to modals.

There's a lot involved here and just saying we'll want to carefully think about the various contexts and use cases to guide the behavior changes that are planned. 🙂

[alaa-alshamy]

mmm so there's various needs.

so i think to make all the need cases, must add some behavior as option.

and i think using a hash fragment in overlays will prevent the expect of re-launch or feel broken, because no one will expect a hash to do some thing like launch some thing or do some thing important

so making an option to add this behavior to the overlays will achieve all the need in my opinion :)

also i think some people will like if they can make a modal with a path (with route), so if the modal open from a context inside the app will open as modal as normal and change the url to it's route, and if it open from the url it should open as a page. so simply we can open component as modal or as page.

[alaa-alshamy]

i think the easiest way to do so is using multiple router outlets.

so we can use a "popup" outlet as described here: https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets

[rony53]

Thanks , Hope in next update we will got this issue solved , but please do it 1st , i have to publish my apps :)

[rony53]

Also add rootNev button like ionic 3 , when we use any kind of nav function , the hide the menu bar

[moritzgloeckl]

We've also noticed that the hardware back button on Android behaves differently than the browser back button, especially when using replaceUrl: true and skipLocationChange: true in Angular routing.

[RHinderiks]

Is there any news on this? Beta release of our app revealed this at the number one issue for android users. So before we can do a version 1 release we would like this to be fixed

[liamdebeasi]

Hi everyone,

We are aware of these issues and are going to be looking into them now. We are currently prioritizing these issues and hope to have more updates to share soon.

We appreciate your patience as we work through these issues.
Thanks!

[rony53]

Hi everyone,

We are aware of these issues and are going to be looking into them now. We are currently prioritizing these issues and hope to have more updates to share soon.

We appreciate your patience as we work through these issues.
Thanks!

Thanks liamdebeasi ,
We are waiting for the next update, where we get all issue fixed. But we don't know how long we need to wait :) . But it's ok. thanks for your update.
Best
Rony

[ebeliejinfren]

it's important issue and we except to solve this soon but after 4 month and updates that not solve

[Dak1411]

@liamdebeasi,
Waiting for the day your team comes with the solution...😊

[untilbit]

Still waiting for a solution.

[untilbit]

Hi everyone,

We are aware of these issues and are going to be looking into them now. We are currently prioritizing these issues and hope to have more updates to share soon.

We appreciate your patience as we work through these issues.
Thanks!

Any update? This is critical issue to be solved. Withoud this many apps are going to stay in ionic 3.

[liamdebeasi]

I am locking this thread so we don't get too off topic.

I am still working on these issues and will post here when I have more to share. We aren't forgetting about you, just trying to make sure this all gets taken care of properly 🙂

For any new bugs please open a Bug Report, and I will add them here.

[libattistella]

Hi! Any update on these issues? Particulary this one

17824 subscribeWithPriority not working properly w/ popups & higher priority levels

[tanoabeleyra]

This is my workaround for a PWA: https://github.com/tanoabeleyra/ionic-back-button-workaround/commit/77aa0ea57297ec2ff898ba90f87d3264d34c4df3

Back button does pop or closes any overlay (alert, modal, picker, etc.).
I just need to fix the back button not closing the app, if anyone knows how to do it I would really appreciate some help.

[Dak1411]

Hi team,

Please update the current status. Lack of proper solution really affects
lots of projects.

On Thu 18 Jul, 2019, 22:16 Tano Abeleyra, [e-mail] wrote:

This is my workaround for a PWA:
tanoabeleyra/ionic-back-button-workaround@77aa0ea
https://github.com/tanoabeleyra/ionic-back-button-workaround/commit/77aa0ea57297ec2ff898ba90f87d3264d34c4df3

Back button does pop or closes any overlay (alert, modal, picker, etc.).
I just need to fix the back button not closing the app, if anyone knows
how to do it I would really appreciate some help.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/16611?email_source=notifications&email_token=AJSH6KKU65N7B5OMJ27FORLQACM6NA5CNFSM4GI2DUU2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2JCZNA#issuecomment-512896180,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJSH6KMZIA6QDKJKEIDP75LQACM6NANCNFSM4GI2DUUQ
.

[rony53]

I think ionic loss his popularity for its internal debag issue .. we got ionic 5.x but still app closing issue not fixed . if the android user can't close the app then why they use this platform? I am really scared .. maybe my clients are looking for a new developer for their project ...

[liamdebeasi]

Hi everyone,

Wanted to provide an update here. We are still committed to resolving these issues. Because we cannot cancel/prevent a back button event and because we have multiple navigation stacks interacting via different frameworks, developing solutions to these issues can take time due to the complexity of some of these tasks as well as writing tests to ensure functionality does not break in the future.

Regarding @rony53's comment about us closing the issue due to Ionic 5: I think you are confusing the Ionic CLI for the Ionic Framework, which are two different things. The CLI has released a version 5.0, but the Framework has not: https://ionicframework.com/blog/ionic-cli-v5-brings-react-beta-support/. Additionally, as this issue is still open, we have not closed it nor have we forgotten about this issue.

We’ve been focused on getting Ionic 4.6.0 out that introduced some really great performance improvements due to the Stencil One upgrade. Now that Ionic 4.6 has been released, we are looking to loop back to some of these issues.

We hope to have more updates regarding these issues soon. Additionally, we absolutely welcome community PRs and would love any assistance in getting this issues resolved.

Thanks!

[tanoabeleyra]

Hi @liamdebeasi, that's great to hear. I really hope you can fix this because it's critical, we can't deliver an Android app where the back button doesn't work as expected.

I made a workaround for Angular but I would prefer a built-in solution. Anyway, my workaround doesn't yet solve the back button not closing the app, which is annoying.

[Zerokk]

It's indeed a very critical issue. We have the same problem: we can't release our app until this functionality is fixed. Hopefully this is ready soon, but anyways, it's great to hear you're on it, @liamdebeasi!

[Dak1411]

Hi team,
Could you please confirm which is the stable version of ionic?

On Fri 19 Jul, 2019, 04:19 Zerok, [e-mail] wrote:

It's indeed a very critical issue. We have the same problem: we can't
release our app until this functionality is fixed. Hopefully this is ready
soon, but anyways, it's great to hear you're on it, @liamdebeasi
https://github.com/liamdebeasi!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/16611?email_source=notifications&email_token=AJSH6KO42FOBDBQULA5GP5TQADXN3A5CNFSM4GI2DUU2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2KA6PQ#issuecomment-513019710,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJSH6KJYEBOLFIZHNBLVR2DQADXN3ANCNFSM4GI2DUUQ
.

[AnkitMaheshwariIn]

It comes everyday in mind: It's a waste of time to use Ionic Framework - lot's of bugs lot's of issues. And it seems Ionic team have not that much potential to manage issues and resolve on time. They release things before prior testing and that effect our projects.

We have 3-4 products in market - using Ionic from year 2016. We have also taken Ionic paid version Ionic Hub, many more still facing issues in basic things navigation back button, production build etc. etc. listed in above comments by others ( https://github.com/ionic-team/ionic/issues/16611#issue-388218674 )

I request Ionic team to make serious changes in their development strategy and make things better soon because developers are now dependent on your technologies from long time and have no option to move back to other technologies (because project size and team education has already built). That cost much in time and money. Before Ionic seems easy in development (saves time and money) now it becomes double complicated it only ends to frustration.

Thanks/Hope Ionic Team.

[jordankkk]

i think ionic team should focus on angular is enough

[ebeliejinfren]

really it's take long time

[liamdebeasi]

Hi everyone,

I wanted to provide an update regarding the status of this issue. Now that Ionic Framework v5.1 has been released, we will be closing out this issue. Most issues have been resolved, but some have limitations that prevent us from being able to resolve them. Here is a breakdown of the issues listed in the original post:

Capacitor/Cordova Issues

When on the root page, pressing the back button should close the app.

This is now possible in Ionic Framework v5.1. Please see the Hardware Back Button Documentation for an example of how to exit the app.

There should be an event that fires should the user want to show a confirmation popup before the back button closes the app.

Exiting the app is now possible in Ionic Framework v5.1. Please see the Hardware Back Button Documentation for an example of how to exit the app. Additionally, you can use an ion-alert to show a confirmation popup before closing the app.

Back button behavior should be consistent between web and Capacitor/Cordova.

This is not 100% possible for reasons explained at the end of this comment. We have made the behavior as consistent as possible where appropriate.

If a native view is opened (such as the Camera), pressing the back button should dismiss the native view back into the webview.

This was resolved several versions ago.

Hardware back button not working with ion-button and an href to a page.

This is the expected behavior. The hardware back button works within the context of your application’s navigation stack. Using href is going to cause a full page reload, thus emptying the stack. Similarly, if you did navController.navigateRoot, you probably would not then want the app to navigate to the previous page when tapping the hardware back button. Developers should try and stay within the scope of their framework’s routing solutions (I.e. using routerLink and related methods for Angular routing).

subscribeWithPriority is not working properly with popups and higher priority levels.

This is fixed in Ionic Framework v5.1. Please see the Hardware Back Button Documentation for an example of how to use priorities and call multiple back button handlers.

Browser Issues

Many of the browser hardware back button issues are not resolvable at this time. Running in a Capacitor/Cordova application provides developers with additional tools to control the hardware back button functionality that does not exist in a web browser. For example, the ionBackButton event is only emitted in a Capacitor/Cordova application and is not emitted in a web browser. As a result, hardware back button behavior when running in a web browser will not perfectly align with the behavior when running that same app in a Capacitor/Cordova application. Where possible, we will work to make this behavior consistent.

Some developers have requested that users be able to dismiss a modal or close the menu when pressing the hardware back button. While this is possible in a Capacitor/Cordova application via the ionBackButton event, it is not possible when running in a web browser. The only way we can make this work is if we integrate overlay components (ion-modal, ion-popover, etc) and ion-menu with the router. We do not feel that it would be correct to take a temporary component such as ion-modal and link it with the global state of the router. This could lead to many inconsistencies. For example, if a user lands on the url /app/show-signup-modal which presents a sign up modal, what should be shown underneath the modal? Additionally, what should happen when the user decides to cancel out the modal? The modal is very much dependent on the context in which it was presented. This is something we lose by integrating these kinds of components with the router.

For complete hardware back button support, we recommend using Capacitor or Cordova.

We have also released brand new hardware back button docs: https://ionicframework.com/docs/developing/hardware-back-button. They contain examples of common things developers have asked us how to do over the years. Please feel free to open an issue on the Ionic Docs Repo if you have any suggestions on how we can improve these docs.

Moving forward, please open a new issue for any additional hardware back button issues you run into. Thank you!