I'm trying to control the default BACK action on my PWA because when user press the Mobile Phone's back button it messes up the UX.
For example, when modal is show, back button should close modal and not go back to previous page.
After much research and testing I finally got this working with the following code:
$(window).on('popstate', function (e) {
let goBack = true;
if($("#modal_box").is(":visible")) {
goBack = false;
$("#modal_box").modal('hide');
}
if(goBack == true){
history.back();
}else {
// Stay on the current page.
history.pushState({}, '');
}
});
But the problem with this is when the user is scrolled down somewhere middle or bottom of the page the above code makes the view jump back to the top of the page, and it's frustrating the users.
Is there a quick fix for the above code? Or do I need to use different logic since I think the history.pushState is making the page jump up to top no matter what.
UPDATE: Thank you all for comments. I figured a simple way to keep the page from scrolling (or at least visibly scrolling) like how @reynolds suggested... but instead of messing with the scroll state, for some odd reason , using
history.go(1);
instead of history.pushState({}, '');
works!
What's happening with history.go(1) is that instead of making the page reload to top of page, going "forward" seems to auto scroll to where you were previously, in a very very fast way which the user can't even notice anymore. And this behavior seems to be native in desktop and mobile browsers i've tested on (Firefox, Chrome, Opera). Beautiful!