Making JS Countdown work even when mobile display goes off?

I'm struggling to find out how to keep my Javascript countdown keep showing correct numbers even when user's mobile screen goes off (with and without screen lock).

I've a simple JS countdown -

// I set the time_remaining during page load

let time remaining = $("#time-remaining).val(); 
let countdown = setInterval(function () {
    let minutes = Math.floor(time_remaining / 60);
    let seconds = time_remaining % 60;
    // Code to displaying minutes and seconds in html
    // goes here.
    if(time_remaining === 0) {
        clearInterval(countdown);
    }
    
}, 1000);

Now, in order to compensate for the halted setInterval, I make use of the visibilitychange event as follows -

$(document).on('visibilitychange', function() {
 if(document.visibilityState === 'visible') {
    axios.get('/get-time-remaining')
         .then(function (response) {
            time_remaining = response.data.time_remaining
    });
 }
});

That is, whenever the user screen gets visible, I fetch the time remaining from server and update my time_remaining variable.

This approach works okay; does introduce a bit of delay but does the job.

However, I've observed that visibilitychange triggers ONLY WHEN user's mobile screen has screen-lock enabled.

If the user unlocks the mobile; visibilitychange event is triggered and I get my time_remaining as expected.

However, without a screen-lock, that even is not triggered; and thus, the countdown does not function properly.

I've considered different approaches such as -

Polling the server every few seconds and fetch the correct time remaining; and adjust the countdown on user's mobile.
Making use of service worker; but I'm not exactly sure how to make it work.
Maybe there's some other JS event that gets triggered when the user has the browser window 'focused' or 'visible'; on which I can trigger my AJAX call to the server to get correct time remaining.

Would really appreciate if you could help figure out a proper solution to this problem.

steve_laracasts

6 years ago

Level 7

I am pretty sure web pages stop working when a user moves away from the page on mobile devices. This is for security and power saving and is unlikely to change.

If the application is not super sensitive re this time and you can rely on the users clock, then rather than getting the time remaining how about getting a timestamp for when the counter runs out and then use javascript to calculate the remaining time?

That way, as soon as your web page is brought back into focus and all the scripts start up again it will only be a second before the correct countdown time will be displayed and there's no server calls to make or odd JS change events either.

This looks sensible:

https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/

thebigk

6 years ago

Level 13

@kel_ - Thank you for your response.

I did try relying on user's clock in the past; but it doesn't work as expected.

My latest approach involves listening to a server event in Echo and adjusting user's clock every 10 seconds. Not sure if there' s a better way.

steve_laracasts

6 years ago

Level 7

Yeah...

How about making a comparison between the server clock and the users clock, an adjustment made accordingly to bring the users clock into line and the offset stored for future use in calculating the remaining time on the countdown. Once you are setup there shouldn't really be any need to keep re-checking the server time. A second is pretty much a second wherever you are and however your clock is set.

I agree it's not perfect, but probably the best answer.

p.s. how accurate does it need to be? I work with clocks all the time in the audio domain and once it gets past a certain point it is generally better to work with samples rather than actual time delineations. Unless you are working with audio it's hard to imagine a use case for a timer countdown that would need to be more accurate than a second.

1 like

thebigk

6 years ago

Level 13

Well it's for the real-time quiz that I'm developing; and I think I could do well with +- 1 second. Because the countdown concludes with 'Get Set Go'; so user won't really notice a delay of a second.

steve_laracasts

6 years ago

Level 7

Oh yeah, I think this approach will be fine, I see the need for everyone to be on the same clock, but a second either way is't going to spoil the fun :)

Good luck!!

Please or to participate in this conversation.