Garder un minuteur précis en arrière-plan

Tous les navigateurs modernes réduisent l'activité d'un onglet en arrière-plan pour économiser la batterie. setInterval est throttlé à 1 Hz, requestAnimationFrame est mis en pause, l'audio peut être différé. Voici comment garantir qu'un minuteur reste exact.

Technique 1 — Horloge cible (incontournable)

Premier réflexe : ne jamais incrémenter un compteur. On stocke endTime = Date.now() + duration au démarrage. Quel que soit le throttling, à chaque tick on calcule endTime − Date.now(). La précision dépend uniquement de l'horloge système.

Technique 2 — Page Visibility API

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    // Forcer un rafraîchissement immédiat
    render(endTime - Date.now());
  }
});

Permet de recaler l'affichage dès que l'utilisateur revient sur l'onglet, sans attendre le prochain tick.

Technique 3 — Notification Web pour la fin

Si l'onglet est en arrière-plan au moment où le minuteur arrive à zéro, le son peut être différé ou bloqué. La Notification API affiche un message système qui réveille l'utilisateur même hors de l'onglet :

if (Notification.permission === 'granted') {
  new Notification('Minuteur terminé', { body: 'Votre temps est écoulé.' });
}

Demande l'autorisation explicite à l'utilisateur (politique navigateur).

Technique 4 — Service Worker (avancé)

Pour une fiabilité maximale (PWA), un Service Worker peut programmer une notification via showNotification à une heure cible. Le navigateur la déclenche même si tous les onglets sont fermés. Compatible Chrome, Edge, Firefox. Pas iOS Safari.

Limites côté iOS Safari

Safari iOS suspend complètement les onglets en arrière-plan, sans Service Worker fiable pour les notifications. La seule garantie est de garder l'onglet au premier plan avec l'écran allumé (Wake Lock API quand disponible).

if ('wakeLock' in navigator) {
  await navigator.wakeLock.request('screen');
}

${CTA('alarme/notification', "Tester l'alarme avec notification")}

Récapitulatif

Technique	Compatibilité	Utilité
Horloge cible	Universelle	Précision du compte
Page Visibility	Universelle	Rafraîchissement à la reprise
Notification API	Sauf iOS Safari	Alerte hors onglet
Service Worker	Sauf iOS Safari fiable	Alerte onglet fermé
Wake Lock	Chrome, Edge, Safari 16.4+	Garder écran allumé

Comment garder un minuteur précis en arrière-plan