I built a browser alarm clock for people who want a quick alarm on a laptop, like a reminder to leave for a meeting or to take something out of the oven. The first thing I had to write on the page was what it can't do: it is not a replacement for your phone's built-in alarm. Here is why, and what I did about each limit.
Parsing the time people actually type
People type "7:30", "7am", "0730" or "1930". The alarm turns that into the next time that clock time comes round. If it is a quarter past eleven at night and you type 7:30, the alarm is for 7:30 tomorrow morning, and the page shows "in 8 h 15 min" so you can see it understood you.
The date maths uses the device's local Date, not a hand-rolled offset:
const at = new Date(now.getFullYear(), now.getMonth(), now.getDate(), h, m, 0, 0); if (at <= now) at.setDate(at.getDate() + 1); Building the date from local parts and adding a day with setDate means the browser handles the night the clocks change.
Background tabs run late
Browsers slow down timers in tabs you are not looking at, to save battery. Chrome documents this in its timer throttling notes, and in practice a background alarm can go off up to about a minute late.
I can't stop the throttling, so I made sure it can't add up. The alarm never counts ticks. Each check compares the current time with the stored alarm moment, and when the tab becomes visible again a visibilitychange listener runs that check at once:
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') { tick(); drawList(); } }); The countdown timer on the same site works the same way. It stores the moment the timer ends, endAt = Date.now() + left * 1000, and every tick recomputes what is left from that, so a slow tab shows the right number as soon as you look at it.
Phones turn the screen off
On a phone, a locked screen usually pauses the page. While an alarm is set, the page asks for a Screen Wake Lock where the browser supports it, and asks again when the tab comes back, because the browser releases the lock when you switch away. If you lock the phone yourself, most phones pause the page and the alarm won't sound until you unlock it. The page says that in plain words.
Sound needs a tap first
Browsers only let a page play sound after the user has pressed something on it. The "Set alarm" and "Test sound" buttons count as that press, so the page creates its AudioContext there and calls resume() if the browser has suspended it. If you set an alarm, the sound is already unlocked when it goes off.
Which time zone?
The alarm uses the device's own clock and time zone. That is the right default for "wake me at 7", but it raises a question I hit while testing: what happens to a time that doesn't exist? In New York on 14 March 2027, the clocks jump from 2:00 to 3:00, so 2:30 never happens. For the alarm, Date moves it forward on its own. For the time zone converter I had to decide explicitly, and it moves 2:30 forward to 3:30, the same choice the clock makes. In November, when 1:30 happens twice, it takes the first one.
What I'd keep
- Store the target moment, never a running count.
- Recheck as soon as the tab is visible again.
- Tell people the limits on the page itself, in the first paragraph.
If you have built something that has to fire on time from a browser tab, I'd like to hear what you ran into.
