Aurelia 2 - before unload

So for the practice Sudoku app I am working on I would like to add a warning before navigating away or closing the application tab.
I can use window.onbeforeunload, however its just a generic message and I would like to something slightly better looking and more descriptive.

Would there be any suggestions on the best way to create a hook in the shell page to display a custom warning here?

I have tried canLeave in the default templates my-app.ts, but it doesn’t seem to trigger and the page navigates or closes with no warning. It appears that since its the container for the described routes (sudoku, about) that it is outside those lifecycle events.

I could have swore that in AU1 canDeactivate I could prevent the app window from closing if form data was dirty and prompting for that before the app was removed. Now it just happily navigates away.

I’m not sure that’s doable. If the user closes the tab/window since chrome 50 and somewhat you can’t even display any longer a custom message in the native dialog

So you can, but its a default message.

Changes you made may not be saved.

I have this in the header section and while it doesn’t display the message, it does show a confirm dialog

<script>
        window.onbeforeunload = function ()    {
            //The message is ignored by most browsers, just a confirm close is shown
            return "You might lose your progress Are you sure?";
        };
</script>

Yeah that’s what I meant, no custom dialog or even text in recent browser versions

1 Like