Web workers in Chrome v54 run twice as slow when working on an inactive tab

Question

I have a webapp that plays audio with transition to / outs using setTimeout. It is well known that chrome and other browsers launch setTimeout when it is running on an inactive (or background) tab. Therefore, to solve this problem, I use this script ( https://github.com/turuslan/HackTimer ), which fixes the Timer API instead of Web Workers. This allows you to switch to the volume attenuation mode in the background so that they always run and run at the same time, regardless of whether the tab is active. This works fine in Chrome, but now I noticed that in version 54 (and possibly earlier versions) chrome web workers run twice as slow when working on an inactive tab. This problem does not occur and works great with FireFox and even with IE11!

Is this a lame mistake? Or is this intentional behavior? Is there another way around the problem? I do not want to require webapp to open in a separate window, so this is not an option.

Here is a demo: https://jsfiddle.net/2614xsj8/1/

// Open Chrome console and run this then wait a few seconds to see // it is executing on time. Then open or switch to a new tab and wait // a few seconds. Come back to see how much slower the setTimeout // function was being called even when using HackTimer which patches // the Timer API to use Web Workers var rate = 1000; var start = new Date().getTime(); var func = function() { var now = new Date().getTime(); var time = now - start; var status = Math.abs(rate - time) <= 50 ? "on time" : (time / rate) + " times slower"; console.log("executed in [" + time + "] milliseconds. " + status); start = now; setTimeout(func, rate); }; setTimeout(func, rate); 

 <script src="https://cdn.rawgit.com/turuslan/HackTimer/master/HackTimer.js" type="text/javascript"></script> 

Answer 1

Using the "Task Scheduler" would be the best way to do this, then you really are not on a timeout or interval, but on a specific date

But this requires the use of service workers instead of ..., which is a chip. because then your site must also be whitelisted in order to start service workers (so that your site needs a valid SSL certificate)

 // https://example.com/serviceworker.js this.ontask = function(task) { alert(task.data.message); console.log("Task scheduled at: " + new Date(task.time)); // From here on we can write the data to IndexedDB, send it to any open windows, // display a notification, etc. } // https://example.com/webapp.js function onTaskAdded(task) { console.log("Task successfully scheduled."); } function onError(error) { alert("Sorry, couldn't set the alarm: " + error); } navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { serviceWorkerRegistration.taskScheduler.add(Date.now() + (10 * 60000), { message: "It been 10 minutes, your soup is ready!" }).then(onTaskAdded, onError); });