Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

152
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda