I have a microfrontend application or a website built in react. Every time I launch this application, it should increment the counter by one to track number of instances launched. And when I close, it should decrement the counter.
I am managing this in local storage of the browser. And if there is more than one instance I should not allow user to continue.
The problem is for the first application it is capable of decrementing the counter by detecting the unload event on closing the browser tab, but it does not do the same for the second MFE when tab is closed. Probably because the event is not detected due to browser trying to ignore such events and to optimise the behaviour.
Please suggest some ideas how this can be handled.
I have tried couple of ways to handle, but the problem I end up being is the browser ignoring the unload or beforeunload event when tabs are closed for the second instance of the application.
This way when I begin a new application the counter is always set to 1 if I do not restart the browser. This way it defeats the purpose of handling the instance where a user can only have one instance of the application.
Other way to handle this is to force user to click on Exit button for reliable experience and then decrement the counter.