How do I handle refresh in the browser

When a user does a refresh, the application basically resets. If you were on a sub-page it goes back to home etc.

Is there a way to handle this ?

Change the URL when navigating to a sub-page. Then, somewhere in the Application.Create, you can make use of the HasQueryParam function (unit WEBLib.WebTools) like so:

URL: www.MyApp.com?form=SubForm

if HasQueryParam('form', PageName) then
  Application.Navigate('?form='+PageName,ntPage);

Haven't implemented it yet, but thinking about writing the current app state to localstorage. Maybe their JWT and whatever form they are currently using. When the app is reloaded, it could then load the JWT and navigate to that form. Highly dependent on how your app is configured though.

There is not much to do against this. After all, there might be a need to "restart" the application. This is equivalent to a VCL application that someone needs to be able to close at all times.

You might give a warning to the user though, by for example adding the your main form's OnCreate event:

asm
  window.onbeforeunload = function () {return false;}
end;

I disagree Bruno, you are technically correct. But everyone is used to hitting F5 to refresh, not to restart.

However, the above event is a good start, it will allow me handle it. I may stick the status in the session variable and auto resume.

be good to see you solution code

Hi Bruno, I am using the OnBeforeUnload and OnUnload events on the MainForm. They get fired if the browser tab is closed. But they are not fired on F5:Refresh;

Any other suggestions ?

using window variable in Delphi code. onbeforeUnload doesnt exist, but onunload does. That fires after the Event on the Delphi-WebForm.

Again it does not fire on Refresh.

Others on StackOverflow are suggesting what you are, but it looks like it doesnt work. However, I found this, which may work. You could add a OnRefresh event.

```
//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
  console.info( "This page is reloaded" );
} else {
  console.info( "This page is not reloaded");
}
```

On the other hand, in my case I dont need it, I could save the information required when the tab/page control changes and when the user makes a selection.

Russell, I implemented the code to save the state on onbeforeunload event. But it doesnt fire on refresh. So I changed the code to save the state when tab/page control changes. I can see that it is getting saved in the session variable. Unfortunately, the session variable is not persistent across a refresh. So, tomorrow, I will alter it to use cookies.

1 Like

I think this is the better approach, storing state as you go and then using it at app startup, rather than unload events. For example, if a user duplicates their browser tab, you'd want to do the same thing but pretty sure no events at all will be fired in that case. I've used the "localstorage" mechanism to do this kind of thing with themes already, which works pretty well. Not sure if that is the 2021 version of cookies but same idea - survives across browser restarts, etc.

1 Like

@Weetch_Russell
Web_Store.pas (1.7 KB)

I have uploaded my unit to handle it. I had a little issue, its fixed. The unexpected thing was that if the value has not been stored, one gets an exception. Both Session and Local_Storage are working. There is an ifdef to chose either. I like to encapsulate things to handle string names and errors.

I am using 'PageNum' and 'Item' properties. I have the string 'Page' property as a generic thing for other uses. I only have two levels in my code, so I dont need anything else. I am writing my website in it. Everytime the users makes a tab/pagecontrol or menu selection, I save it.

In MainForm.FormCreate event, I check both the params and the session and save the values retrieved. Then in Main_Form.OnShow, I act on it. You can check out the refresh in action here Website Under Construction. Please excuse it being messy, I am playing with various components.

thanks, its works