Best practices for beforeunload

It seems that there are two use cases involved here:

1. The user navigates away (eg back, close tab)
2. The system closes the app (eg close browser)

which both require different responses.

For the first you want to warn the user if there is unsaved data.
For the second you want to save the data as a backup, which you can then 
warn about when you restart.

In principle, both cases dispatch the event 'visibilitychange', which has a 
property that tells whether the visibility is changing to 'hidden' or 
'visible'. This is an ideal event if you want to save state without any 
further dialogue with the user (who may not even be looking at the page), 
since the app may die before the user returns:

 <action ev:event="visibilitychange">
    <send submission="backup" if="event('visibility') = 'hidden'"/>
 </action>

On the other hand, the event 'beforeunload' may be needed (I'm not sure 
about the order that the two events are dispatched) if the user is looking 
at the page, and tries to exit without having saved the data.

As far as I can see, beforeunload works as follows:

When a page is about to unload two events are sent: beforeunload, and if 
that is not cancelled, unload.

A listener for beforeunload can check whether it is OK to exit, and if it 
isn't, cancel the default (using preventDefault()), which causes the 
browser to trigger a confirmation dialogue asking if they are sure they 
want to leave.

If the default is not cancelled, then the unload continues.

I'm not sure if beforeunload is available on Safari. Needs testing. This 
would also require a new action:

 <action ev:event="beforeunload">
    <cancelDefault if="instance('admin')/state = 'unsaved'/>
 </action>

References:

Window: beforeunload event
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event


Don't lose user and app state, use Page Visibility
https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/


Steven

Received on Friday, 1 May 2026 11:47:30 UTC