How to be notified when browser back button is pressed for web project?

[amuna]

[arkivanov]

Hello an thanks for the question! As far as I know, there is no a specific API for the back button in a browser. However there is PopStateEvent, which is fired when the navigates backward or forward. Please note that the user may choose to navigate backward/forward by multiple pages at once.

What is your use case? Maybe we could add something to Decompose.

[arkivanov]

I am not experienced in Web, but as far as I know, it's not possible to consume the back button click event. Which means, the user will navigate in the history, which can not be prevented.

Also I missed a thing, when you assign window.onpopstate, it will replace the listener set by the DefaultWebHistoryController. If you are using the controller, then you can supply your own implementation of Window into it's constructor. Let me know if you need any help with this.

Overall, I assume that you need to perform an action (to hide a html element) on back button click and to prevent the browser from navigating back. If so, then I believe it is just not possible, due to how the Web History API is designed.

Also, as I mentioned earlier, the PopStateEvent is fired when navigating backward and forward, and the user may choose to skip multiple pages at once. We can try adding a callback to DefaultWebHistoryController, which will be invoked when the user navigates, and will provide the information about direction, etc. But again, we can't prevent the navigation.

[amuna]

I just need to be notified when back button is clicked. There is no need to prevent navigation for my scenario. Would I need to invoke the callback in fun onPopState(event: PopStateEvent) on line 118 in DefaultWebHistoryController.kt. This file is a read only file as it is in an external library. Do I need to manually import the library into my project or is there another way?

[arkivanov]

Do you need to listen only for the back button, for any button (back and forward)? What about the case when the user chooses to go back or forward by multiple pages? E.g. there is a stack of 3 components and the user chooses to go directly to the first component.

[amuna]

For my situation, I would just need to listen for a single back button press and maybe a forward (a scenario could arise in the future for that). However, a listener for forward, back and multiple pages would be useful for many future developers using this amazing library.

[arkivanov]

When the user navigates in the browser, the Router state is updated accordingly. Maybe you could just subscribe to the Router state updates and update your html elements accordingly? For example, show an element only if a particular child is (or not) currently active.

I'm asking because listening for the Browser's back/forward button clicks seems not good, due to the fact that the user may skip multiple pages at once. Updating the UI according to the state change looks more correct.