Estoy haciendo un proyecto de temporizador HTML/CSS/Javascript Pomodoro. Es esencialmente un temporizador de cuenta regresiva. Para el temporizador, estoy usando SetInterval que actualiza el DOM. También hay un objeto Fecha para mayor precisión. El sonido/alerta se reproduce cuando los segundos y los minutos son iguales a 0. Aquí está el código completo en jsfidle , también una demostración en vivo . Para fines de prueba, los minutos de Pomodoro se establecen en un número bajo.

 function starttimer() { // Create a new date element and add the pomodoro interval let ddate = new Date(); ddate.setMinutes(ddate.getMinutes() + pomodoroMinutes); timer.startTime = ddate; if (isStarted === true) { let ddate = new Date(); ddate.setMinutes(ddate.getMinutes()); timer.startTime = ddate; } timer.intervalId = setInterval(() => { calcMinsSeconds(); width = (minutes * 60000 + seconds * 1000) / (pomodoroMinutes * 600); //update the Progress bar elem.style.width = width + "%"; if (seconds == 0 && minutes == 0 && state === 'study') { width = 100; elem.style.width = width + "%"; ddate.setMinutes(ddate.getMinutes() + pomodoroMinutes); clearInterval(timer.intervalId) buttonsState(true, true, true, false, false); alertSound.play(); } else if (seconds == 0 && minutes == 0 && state === 'break') { clearInterval(timer.intervalId) buttonsState(false, true, true, true, true); pomodoroMinutes = initialInterval; state = 'study'; alertSound.play(); clearButton.disabled = true; resetTimes(); } }, 10); }

Lo probé en el escritorio y hasta ahora no encontré ningún problema. Sin embargo, cuando lo probé en mi teléfono Android... Primero en Chrome. Cuando lo ejecuto, solo funciona cuando mi pantalla está encendida. Cuando está apagado, continúa con el temporizador de cuenta regresiva por debajo de 0 minutos/segundos. En Firefox es lo mismo, además, incluso cuando la pantalla está encendida, la alerta de sonido no se reproduce si la pestaña/navegador está inactivo.

Así que me pregunto cuál es el enfoque correcto. ¿Debo usar Web Worker o Service worker para esto? Hace poco leí sobre ellos en MDN. Ya que necesito que este código se ejecute en segundo plano cuando el teléfono está bloqueado. Si ese es el caso, no estoy seguro de cómo implementarlo, ya que los trabajadores no pueden realizar operaciones DOM.