dotnet api and vue client detect close browser / tab - vue.js

Question

I have a client written in Vue.js and an API written in .NET core, the API also expose the static pages of the distribution of the vue.js client, the all thing is running on localhost and will stay that way.
When the server is up and running it's also opens a browser tab with the website URL on localhost, I made that with 2 methods: launchBrowser in the launchSettings or using Process.start(URL).
I would like that when the tab is closed the server will shutdown as well.
I have tried the following methods:
getting the process of the tab and detect close ( but every browser handle the tab process differently) - didn't work
using beforeunload and unload event in the client and send HTTP GET request to the server:
created() {
window.addEventListener('beforeunload', () => {
const request = new XMLHttpRequest();
request.open("GET", URL, false);
request.send();
});
}
it didn't work
check in the visual studio Tools -> Options -> Web Projects "Stop debugger when browser windows is closed, close browser when debugging stops", but when I publish the application the settings and launchSettings is not working ( only in the IDE )
Anyone have any idea on how to solve it?

Answer 1

You could try the following strategy
Create a separate launcher script.
The Launcher script launches the server in the background and stores it PID.
The Launcher now spawns a browser-process in foreground/blocking mode.
When the browser is closed (all tabs are closed) it will return control to the launcher script
Now you can kill the server with the PID you stored previously.