Browser back/Forward button with saved warning message

[AditiG12]

Hi Team,

I am working on my application and I am stuck onto a solution, where I want to give a warning message on the click of back button of the browser. Whenever there are unsaved changes on the page, and user is navigating away from that page, I want to warn user that there are unsaved changes. So for this I am using below code:

window.addEventListener('popstate', function (event) {
// The popstate event is fired each time when the current history entry changes.
if(dirty==true){
var r = confirm("You pressed a Back button! Are you sure?!");

    if (r == true) {
        // Call Back button programmatically as per user confirmation.
        history.back();
        // Uncomment below line to redirect to the previous page instead.
        // window.location = document.referrer // Note: IE11 is not supporting this.
    } else {

event.preventDefault()
// Stay on the current page.
history.pushState(null, null, window.location.pathname);
}

    history.pushState(null, null, window.location.pathname);

}
}, false);

But niether preventDefault() is working nor window.beforeunload nor popstate confirm cancel is giving the desired outcome to come.

However, I created one POC where page.js is not used, and there on click of browser back button on before unload event is giving me warning pop up.

Could you please suggest solution for this as in the documentation no such case is catered

[AditiG12]

IS there any update ?

[AshfordN]

What you are trying to do is not as simple as it seems. The browser's back button is a browser-level control, and, to the best of my knowledge, no major browser allows you to cancel or intercept the effects of the back button.
I have a similar requirement (although with a slightly wider scope) for a SPA that I'm working on, and it takes quite a bit of programming gymnastics to get it right — almost to the point of spaghetti code — since you're wrestling against the aforementioned limitations of the browser.
If you're only concerned about the back button, you could probably try replacing the current history state, then pushing a new one. That way, when the user moves backwards in the history, you'd be in a position to test for the first state. Something like this:

// --snip--
// the user changed the form
let state = history.state;
state.marked = true;
history.replaceState(state);

// --snip--
// define newState
history.pushState(newState, null);

// --snip--
// user presses the back button

// --snip--
// we are now in the middleware/route handler
if (history.state.marked) {
    let r = confirm("You pressed a Back button! Are you sure?!");
    if (r) {
        let state = history.state;
        delete state.marked;
        history.replaceState(state);
        history.back();
    } else {
        history.forward();
    }
}

Now, of course, the code above is just a very rough estimation of the algorithm. You'd have to do your own research and figure out how best to adapt this approach to your project. But, all in all, I don't think the issue that you've described is inherently related to page.js.