After a long running server job, I need to automatically trigger a file download in my user's browser. I also have active websocket connections that I need to maintain in case the user is preforming different tasks in my web app. Originally I was doing this:

window.location.replace(downloadLink);

However, after that line executed I would miss websocket messages. This question deals with the same problem: On-Click A-tag with Href, socket gets disconnected

Then I tried this:

window.open(downloadLink, "_blank");

However this flashes a new tab open and closes it immediately. Its very jarring if the user was working on something else. I have also tried this:

axios.get(downloadLink, { responseType: "blob" }).then((response) => {
  const fileURL = window.URL.createObjectURL(new Blob([response.data]));
  const docUrl = document.createElement("a");
  docUrl.href = fileURL;
  docUrl.setAttribute("download", fileName);
  document.body.appendChild(docUrl);
  docUrl.click();
});

This works but it downloads the file in the background. This file is very large so I would like the user to be able to see download progress in the downloads bar at the bottom of the page.

Does anyone know how to download a file without disconnecting web-sockets or opening a new tab while still displaying the browsers file download progress?