Sure you want to leave? - (The Standard, Ep. 14)

hey everyone it's Sam here sometimes your users will leave your page but what if they're still in the middle of an operation like submitting a form or uploading a file in this episode I'm going to show you the standard way to Warner user that they're closing your page let's begin [Music] when a user closes your page or follows a link to a different page which is kind of like losing your page your JavaScript has a chance to intercept this and warn your user via the before unload event let's take

a look so here is the simplest example we can add a listener in the before unload event and return a message you have to give a message because all browsers will display at the batum but newer browsers will actually override this to a very generic one about changes may not be saved either way this will prompt the user are you sure you want to close me but we know that a page which always warns you it's going to be closed it's going to be incredibly frustrating for your users so you should add a

condition to only pop up the dialog when you might lose some data like a network request is still in transit or a form is unsubmitted what I suggest is to use unfinished promises for example every time you do a network fetch you get back a promise like this we can write a method which adds that promise to a set of pending operations if anything is in that set we still have operations were waiting for so we can make sure to block the page from unloading then we had a method to the promise for whe

n it's done which removes it from the set the same set could control the display of a busy spinner this is a really neat way to remind your users that something isn't working and that they'll learn that closing a page during that time will prompt them to wait I also want to cover a special case modern browsers have a method called send beacon which lets you send a network request without waiting for a response you file a request and forget about it it's really useful for analytics events and if

it suits your needs you won't need to block your users until it completes it's actually designed to run even after a page is closed be sure to check out the extended article where we explain this topic in a bit more depth and we have some code snippets for you to use so remember use the before unload event to prompt the user use the set to keep track of unfinished business on your page and you send bacon for fire-and-forget Network requests that was unloading the page the standard way see you on

the next hit we've got my process right it's very important