Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

167
Vistas
Javascript countdown timer [Android] when the browser tab is innactive or the phone is locked

I'm making an HTML/CSS/Javascript Pomodoro timer project. It's essentially a countdown timer. For the timer, I'm using SetInterval which updates the DOM. There is also a Date object for more accuracy. Sound/Alert is played when the seconds and minutes are equal to 0. Here's the whole code on jsfidle, also a live demo. For testing purposes, the Pomodoro minutes are set to a low number.

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);
}

I tested it on desktop and so far I didn't find any issues. When I tested it on my Android phone, though... Firstly on Chrome. When I launch it works only when my display is turned on. When it's off, it just continues to countdown timer below 0 minutes/seconds. On Firefox it's the same, plus even when the display is on, the sound alert doesn't play if the tab/browser is inactive.

So I'm wondering what's the right approach. Should I use Web Worker or Service worker for this? I recently read about them on MDN. Since I need this code to run in the background when the phone is locked. If that's the case I'm not sure how to implement it, since the workers cant do DOM operations.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda