Ionic 4 - PWA Back Button not closing Modal

Ionic Framework
1

Any idea how to fix the back button, both the browser and the android physical button.
In v4 beta.16 when running as normal web page or PWA and a modal is opened then the back button does not close the modal but change the page in background! When you close the modal then you happen to be on a different page :frowning:

2

You could subscribe to the back event and close the modal aka override de default behavior

To do so you have two options:

  1. In the Platform there is a subscribeWithPriority (https://github.com/ionic-team/ionic/blob/ce1fcea68c7d5e0249c6c1c1fc612a86b2866243/angular/src/providers/platform.ts)

  2. You could use the following decorator to catch the event @HostListener('document:ionBackButton', ['$event'])

1 Like
3

I actually cant get any of these to do something working with beta.17. Am i right at assuming this would handle the in the header as well as the android hardware back button ?

4

I think there might be still some glitch, depends of your use case. There is a try to have one single issue to consolidate everything which has to do with back button -> https://github.com/ionic-team/ionic/issues/16611

5

That ticket is related to the android back button. i want to overrride and prevent the default behaviour of the ion-back-button in the ion-toolbar. Is there a way to do that ?

6

Hi,

Do you know if this two options are working in v4.0.1 ?
I don’t receive any event using document:ionBackButton. And no subscription with subscribeWithPriority.

window.onpopstate dismiss the overlay and the page.

I tried a guard canDeactivate, check an active overlay.
If active dismiss and return false
Else return true.
It prevent from navigate back but it breaks the navigation route.

I tried almost every possibilities with no success.

Maybe you can help me on this.

Thank you

1 Like
7

For me it works (the hostlitener solution) when I try the Android app, as a pwa doesn’t seems to work right

But the issue I listed above is still open https://github.com/ionic-team/ionic/issues/16611

1 Like
8

Indeed i’m working on a pwa. I can’t imagine going to production with this issue.
I’ll try to manage the guard option.

Thanks

9

Are you interested in a hacky workaround?

10

Here you go: https://github.com/deckgo/deckdeckgo-app/blob/master/src/app/modals/app-remote-settings/app-remote-settings.tsx

Push a state in the browser history, listen to pop state to remove the state and close the modal :wink:

I do that in my PWA to remote control presentation created with DeckDeckGo which is developed with the Ionic PWA toolkit (Stencil), but I guess it could be adapted to Angular too

1 Like
11

Thank you ! I’ll try that !

I was going to push a state inside the overlay check function and let the hardware back button remove it from History.
Because it seems that the backbutton changes the browser History even if i return false inside the guard canDeactivate. But i’m not 100% sure…

12

Interesting, let me know which solution you come with, have fun :wink:

13

So i can confirm it’s working with pushState
I also created a special guard for root pages (tabs in my case) where I check these situations inside a canDeactivate function.

1 - if an overlay is open I push a state, dismiss the overlay and return false.

2 - i created a global variable (routeFromRoot) inside an other service. I set it to false. Every time I want to route forward from root pages I set routeFromRoute to true. And inside canDeactivate if routeFromRoute I set it to false and return true.
If !routeFromRoute we can add different check
Mobile : confirm exit app
Browser : do nothing or… Etc.

This solution also help preventing loop through navigation history when clicking hardware back button. So when you are back to a root page you can’t go back, you go forward or leave the app.
Another thing is that browser back button and hardware back button will work the same way so you can test it directly from ionic serve.

1 Like
14

Cool, thx for the feedback, interesting :slight_smile: