User alert to confirm browser refresh

[akansjain]

What?

A basic browser alert has been created before unloading

Why?

To prevent accidental page refreshes which would lose the user's data and progress.

How?

A basic browser alert is implemented using window.addEventListener('beforeunload')

Testing Instructions

[akansjain]

Hey @adamziel ,
Please review this PR and provide your feedback.

[eliot-akira]

Note that the embedded site can have its own event handlers for window beforeunload event. For example, the post edit screen in WP admin:

	/*
	 * When the user is trying to load another page, or reloads current page
	 * show a confirmation dialog when there are unsaved changes.
	 */
	$( window ).on( 'beforeunload.edit-post', function( event ) {

https://github.com/WordPress/wordpress-develop/blob/933537c35a9ebaba561562652d76a1ff2e988731/src/js/_enqueues/admin/post.js#LL495C1-L498C63

This is actually for the iframe's window, so maybe that event fires before the Playground host's window.

I also wonder if there could be a more descriptive alert message that explains how refreshing the page or closing the browser tab may risk losing unsaved data. WP core's message is:

The changes you made will be lost if you navigate away from this page.

[adamziel]

Thank you @akansjain! @eliot-akira brought up an interesting scenario – that is, we're in a post editor with an unsaved content and closing it would trigger an alert. What happens then?

[akansjain]

Hey @eliot-akira @adamziel ,
If you want to handle the beforeunload event specifically for an iframe's window, you can access it using the contentWindow property of the iframe element.

@adamziel I think when we're in a post editor with an unsaved content and closing it would trigger an alert then:-

If the user chooses to confirm the action (e.g., by clicking "Leave" or "OK"), the browser will proceed with closing the window or navigating away from the page, effectively discarding the unsaved content.

If the user chooses to cancel the action (e.g., by clicking "Stay" or "Cancel"), the browser will prevent the default behavior of closing the window or navigating away, allowing the user to continue editing and saving the content.

[adamziel]

@akansjain Thank you! I'm at the WordCamp EU this week and may not be able to process this in the next couple of days, but I will follow up after that.

[akansjain]

@adamziel Sure.

[dmsnell]

@akansjain thanks for the PR!

I like the idea of warning people before they lose content, while at the same time I wonder about the need because part of what makes the Playground different is its ephemerality.

In the patch there's no message on the unload handler. I worry that what this could do is unintentionally harass people who want to quickly open and close Playground windows, people who aren't concerned with saving data.

Do you have any ideas for:

• communicating why we're trying to interrupt the page close
• avoid running the unload handler if there's nothing to save

[adamziel]

Noting this should only run when using temporary storage (persistent Playground storage was added recently)

[adamziel]

This one seems stale so I'll close it. Feel free to reopen!