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

224 views Asked by At

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.

0

There are 0 answers