La aplicación de temporizador basada en web que usa el método window.setInterval en JavaScript no funciona como se esperaba en el navegador móvil. La razón detrás de esto es que después de cierto tiempo, la pantalla se apaga debido a la inactividad del usuario y una aplicación se mueve al fondo para ahorrar energía. Debido a que window.setInterval no se activa periódicamente y todo el cálculo se tira.
Sin embargo, he notado que cierto temporizador basado en la web funciona bien en el navegador móvil a pesar de estas limitaciones. Por ejemplo Google Timer . A pesar de la limitación anterior, Google Timer funciona bien incluso en modo sin conexión . Qué técnicas utilizan estas aplicaciones para que funcionen también en el navegador móvil.
Debe utilizar la hora del sistema en los cálculos. De esa manera, cuando su página vuelva a aparecer, mostrará el estado según la hora actual en lugar de depender de los pasos anteriores.
btn.addEventListener('click', () => { btn.disabled = true; const start = new Date().getTime(); const end = input.value * 60 * 1000 + start; let timer = setInterval(update, 1000); update(); function update() { const current = new Date().getTime(); let remaining = (end - current) / 1000; if (remaining <= 0) { clearInterval(timer); btn.disabled = false; output.textContent = 'Done!' } else { output.textContent = `${Math.floor(remaining / 60)}m ${Math.floor(remaining%60)}s`; } } }); <button id="btn">Countdown</button> <input id="input" type="number" value="2" min=1 max=59 size=5 />mins <p id="output">0m 0s</p>