PWA back button not working for overlays

Ionic Framework Ionic Angular
1

Hello all!

Is there any way as if nov 2020 on how to make the backbutton work on PWAs?

Elements such as modals, actionsheets, alerts and select elements (https://ionicframework.com/docs/api/select) are used WIDELY in my application and it is completely breaking functionality the current behaviour of the back button (go back instead of closing the topmost overlay)

I’ve tried without much success all the solutions provided here: How to close modal/Alert on back button in ionic4 (PWA)

The accepted solution does NOT work unless you make the ugly history hack (insert a new history item so when the back button is pressed it deletes this empty record) and it its notviable in my case because I’d have to handle lots of extra logic (for example, an action sheet that triggers an alert which this in turns opens a modal would mean that I have to keep track of all of these new ‘history entries’)

For such an amazing framework like IONIC, is just dumb to not have an easy way to deal with this.

1 Like
2

Hey there,

I recommend taking a look at our Hardware Back Button docs as it explains why this is happening: https://ionicframework.com/docs/developing/hardware-back-button#hardware-back-button-in-a-browser

Overlay components are not linked up to routing, which is why the hardware back button does not close those in PWAs. Capacitor and Cordova expose a hardware back button event which lets it work when running in those environments.

3

Thank you for the link. As I read, I see that I won’t be able then to fix this issue if I want to continue my development as a PWA.

Is this subject to change (ionBackButton event not emitted in browser or PWA) in future versions?

4

This behavior most likely will not change any time soon. There is no event in a browser/PWA environment that lets us detect the hardware back button.

In order to integrate the modal with the hardware back button in a PWA environment, we would need to integrate the modal 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.