I want to build a basic stopwatch feature where users can start timing, pause it, and store the elapsed duration in my database.
I’ve run into a couple of challenges though:
Issue 1: When users switch browser tabs, the timer becomes unreliable because inactive tabs get throttled by the browser.
Issue 2: How do I validate the recorded time on the server side using PHP? I was considering sending periodic AJAX requests to sync with the backend, but I’m not sure how to implement a server-side timer mechanism in PHP. Is this approach even feasible?
I’m targeting modern browsers only (no need for legacy support, and Edge compatibility isn’t required).
Any suggestions on the best architecture for this kind of time tracking system?
yah, storing start timestamps on the server sounds like the way to go! this way, you can calculate the duration accurately. also, maybe consider using web sockets for real-time updates instead of AJAX, could help with syncing better!
Had the same issues building a productivity tracker last year. For browser throttling, I moved the timing logic to Web Workers - they run separately from the main thread so tab switching doesn’t mess them up. Fixed the reliability issues completely. For server validation, I went with a hybrid setup. The client sends a heartbeat every 30 seconds with current elapsed time. My PHP backend stores these checkpoints with timestamps in the database. When the session ends, I validate total duration against these server intervals instead of trusting whatever the client reports. Catches tampering while keeping things responsive. Basically treat client-side timing as UI and server-side as your source of truth.
Hold up - what’s your actual use case here? Are people running these timers for hours or just quick sessions? That completely changes how you should validate. And what if someone’s internet cuts out halfway through? Do you reconnect and sync up or just lose the data?