I've have a batch of work that's waiting to be processed in a server side queue, and I would like to kick this off from a web based UI. This all works fine, but I'm finding that I am unable to navigate to another page until the processing of the complete batch is complete on the server. It doesn't matter so much if it completes fully as there are workers in the background that can pick it up later. I'm eager for it to start straight away if possible.
I'm currently trying this:
function _processQueue() {
const worker = new Worker('Scripts/processWorker.js');
const requestData = {
url: "Command/Process"
};
worker.postMessage(requestData);
}
And then in my worker, I'm doing this:
self.addEventListener('message', function (event) {
const url = event.data.url;
setTimeout(() => {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
// Send the request
xhr.send();
xhr.abort();
}, 0);
});
I've also tried approaches with navigator.sendBeacon and fetch. All of which get the process started, but all result in the same outcome, with the UI not allowing navigation away from the page until the request has completed. I'd figured being async that it would be possible to fire and forget.
I have all the feedback I need plugged in through SignalR, so there isn't any need to have the response.