I have an web application which by default saves the user's data at server side if the user's connection get closed by any way which was not initiated by user (Like user's browser process get killed, user's system turned off or if user's internet get disconnected for some time). But if user himself closes the browser or closes the browser tab then in this case the server should delete the user's data at backend.
Basically I want to differentiate between when user himself intentionally closes the web page window or when he was get disconnected by any technical issue.
For this I have used the window's unload event and called an api to delete data.
@HostListener('window:unload', ['$event'])
unloadHandler($event: any) {
this.sendApiToDeleteData();
}
But this function is not getting called when clicking back button from browser. Since going back will be initiated by user by clicking on browser back button. I want to delete user data. But seems like unload does not works with back button.
Also, from documentation here. It says event is not compatible with the back/forward cache And since the doc also suggested not to use unload event.
Is there any other way to handle unloading of page or any better way to handle my use case?
Hello there you can use this along with your code to detect back press:
@HostListener('window:popstate', ['$event'])
onPopState(event) {
console.log('Back button clicked');
}