Minuteur — précis même en onglet d'arrière-plan

Que peut le minuteur ?

Le minuteur est un outil multi-mode qui regroupe sur une page quatre cas d’usage de timer apparentés : un minuteur unique pour le thé ou une seule tâche, un multi-timer avec jusqu’à cinq comptes à rebours parallèles pour cuisine ou intervalles d’entraînement, Pomodoro avec le cycle classique 25/5 plus compteur de streak et longue pause après quatre Pomodoros, ainsi qu’un compte à rebours événementiel vers une date précise comme Nouvel An, anniversaire ou deadline projet.

Trois propriétés distinguent l’outil de la concurrence étudiée : premièrement, le compte à rebours est précis en arrière-plan. Là où les implémentations setInterval classiques accumulent une dérive dans les onglets ralentis (Mozilla Bug #652472 et le tab-throttling de Chrome), cet outil stocke uniquement l’horodatage cible et recalcule à chaque rendu restant = cible - Date.now(). L’horloge système est la source de vérité — peu importe la rareté des ticks d’onglet, le prochain tick affiche le bon temps restant. Deuxièmement, il combine unique, multi, Pomodoro et événement en un seul outil. Les cooking timers concurrents ne font pas Pomodoro, Pomofocus ne fait pas de multi-cooking, e.ggtimer ne fait pas de multi. Troisièmement, la persistance Sticky est purement client : tous les timers survivent au rechargement via Local-Storage, sans contrainte de compte, sans bandeau cookie, sans serveur sync.

La manipulation suit le principe Refined-Minimalism : un sélecteur de mode en haut, des champs spécifiques au mode en dessous, un grand bouton Démarrer, le résultat affiché en évidence dans une carte en typo Mono. La mise à jour du titre d’onglet montre discrètement le temps restant dans la barre du navigateur — pas besoin de revenir à l’onglet pour vérifier l’heure.

Comment fonctionne le tick précis en arrière-plan ?

Les navigateurs ralentissent la fréquence de mise à jour des onglets d’arrière-plan pour des raisons d’énergie — Chrome à 1 Hz, Firefox à 0,5 Hz, Safari encore plus agressif sur batterie (Page Visibility API). Un Pomodoro naïf qui à chaque tick setInterval calcule remaining -= 1000 accumule sur un cycle de 25 minutes en arrière-plan facilement 5 à 10 secondes de dérive — l’alarme se déclenche en retard.

Cet outil utilise une autre approche : au démarrage, l’horodatage cible Wall-Clock endTimestamp = Date.now() + durationMs est stocké. À chaque tick setInterval (toutes les 200 ms), restant = endTimestamp - Date.now() est recalculé. Si l’onglet est ralenti et ne tick qu’une fois par seconde, le tick saute toute la durée ralentie — le temps restant reste correct parce qu’il est dérivé de l’horloge système, pas d’un comptage de tick. Au rechargement, le même endTimestamp est restauré depuis le Local-Storage et le temps restant continue comme si rien ne s’était passé.

L’alarme audio a son propre problème de dérive : setTimeout peut tirer en retard ou disparaître complètement du ralentissement. La solution est la Web Audio API : les nœuds oscillateur sont planifiés avec AudioContext.currentTime qui n’est pas ralenti — même si l’onglet est resté une heure en arrière-plan, l’alarme joue à la seconde exactement prévue après le passage au premier plan. Sur iOS Safari, AudioContext doit être « déverrouillé » une fois par un geste utilisateur, ce qui se fait automatiquement au clic sur le bouton démarrer ou « Tester le son ».

Comment le mode Pomodoro est-il construit ?

La méthode Pomodoro a été développée à la fin des années 1980 par Francesco Cirillo et baptisée d’après son minuteur de cuisine en forme de tomate (Technique Pomodoro sur Wikipédia, pomodorotechnique.com). Le cycle classique : 25 minutes de travail concentré, 5 minutes de pause, quatre fois — puis une longue pause de 15 minutes comme reset, avant que le bloc suivant ne démarre.

Le mode Pomodoro de cet outil implémente précisément ce cycle comme machine à états. Après chaque bloc de travail, l’outil bascule automatiquement en pause, après chaque bloc de pause de retour au travail ; après quatre blocs de travail (completedWorkBlocks % 4 === 0), la pause suivante devient longue. Le compteur compte les Pomodoros terminés aujourd’hui — visible en streak, réinitialisable d’un clic à tout moment.

Quatre presets couvrent les styles de travail les plus fréquents :

Preset	Travail	Pause	Longue pause	Streak
Classique	25 min	5 min	15 min	après 4
Court	15 min	3 min	10 min	après 4
Long	50 min	10 min	30 min	après 2
Flow	90 min	20 min	30 min	après 1

« Classique » est la définition originale, « Court » convient aux journées fortement fragmentées, « Long » approxime les cycles ultradiens (rythmes de 90 minutes du cerveau selon la recherche BRAC), « Flow » correspond aux blocs « Deep Work » de Cal Newport. L’option auto-switch se désactive dans l’accordéon paramètres si vous voulez acquitter le changement de phase manuellement — par exemple pour ne pas basculer en pause en plein milieu d’une réflexion.

Quand utiliser le multi-timer pour la cuisine ?

Cuisiner avec plusieurs composantes est le cas d’usage multi-timer le plus fréquent : pâtes 8 minutes, brocolis 5 minutes, sauce 12 minutes — tout en parallèle, tous avec des fins différentes. Un minuteur de cuisine classique ne peut en gérer qu’un, les cooking-timers App Store exigent souvent un compte, l’onglet de navigateur est la solution naturelle. Jusqu’à cinq timers parallèles dans cet outil, chacun avec son libellé — le titre d’onglet montre le timer expirant ensuite en alternance, un coup d’œil sur la barre du navigateur suffit pendant que vous coupez, remuez ou faites la vaisselle.

L’option Garder l’écran allumé dans les paramètres est en or sur tablette. Elle utilise la Screen Wake Lock API, disponible de manière stable depuis 2025 dans tous les navigateurs actuels (Chrome 84+, Firefox 126+, Safari 16.4+) — l’écran ne passe pas en veille tant que l’option est active et l’onglet focalisé. Au changement d’onglet, le lock est libéré automatiquement pour économiser la batterie.

Les intervalles HIIT sont le deuxième cas multi : 45 secondes de sprint, 15 secondes de pause, plusieurs fois. Au lieu d’une appli qui impose une fitness-ligue, vous saisissez exactement les durées qui correspondent à votre entraînement. L’alarme audio entre sprint et pause est configurable via le choix de son — « Beep » pour minimaliste-non-distractif, « Bell » pour un marquage de fin de phase plus clair.

Quelle précision pour un compte à rebours événementiel en cas de changement de fuseau ?

Le compte à rebours événementiel stocke la date cible comme saisie Wall-Clock dans le fuseau du navigateur. À la création, la saisie YYYY-MM-DDTHH:mm est convertie via new Date(datetime).getTime() en horodatage UTC — c’est-à-dire la seconde à laquelle ce moment Wall-Clock dans le fuseau actuel du navigateur est passé. Cette seconde est absolue : si vous changez de fuseau en voyage, le compte à rebours continue vers le même moment absolu.

Exemple concret : à Paris (CEST, UTC+2), vous créez un compte à rebours sur le 31/12 à 00:00. L’horodatage cible enregistré est 31/12 00:00 UTC+2 = 30/12 22:00 UTC. Si vous volez à New York pour le Nouvel An (EST, UTC−5), le compte à rebours affiche toujours le même temps restant absolu — il finit, localement à New York, quand il est 30/12 17:00 (soit 31/12 00:00 à Paris). Qui veut au contraire le compte à rebours localement à New York (00:00 EST = 06:00 UTC) doit le recréer à New York ou choisir la saisie de date en conséquence.

Pour le changement d’heure d’été (CET→CEST), le même principe vaut : la saisie est convertie en horodatage UTC absolu, le changement d’heure ne déplace pas le moment absolu. Qui veut des comptes à rebours sur des concepts abstraits « heure locale » (par ex. « toujours 18:00 à Paris quel que soit le fuseau ») a besoin d’un outil de fuseaux horaires — cela dépasse le périmètre d’un simple minuteur.

Quelles sont les limites de l’outil ?

L’outil ne fait délibérément pas : pas de sync cloud entre appareils (Hard-Cap Privacy §7, pas de serveur, pas de compte), pas de stats/charts de productivité (territoire stats-SaaS, pas outil timer), pas de liste de tâches/to-do (périmètre Pomofocus/TickTick), pas d’upload de sons utilisateur (privacy + complexité UI, la liste de presets suffit), pas d’alarme vocale (la Web Speech API est dans le backlog Phase 2 si demande). Le streak Pomodoro n’est pas lié à la journée — si vous travaillez après minuit, l’outil incrémente le streak sans reset de jour ; qui veut un streak qui recommence chaque jour doit le remettre à zéro manuellement.

Les notifications système sont optionnelles et opt-in. L’outil ne demande pas automatiquement la permission au chargement de la page — les prompts de permission interrompent le flow, sont eux-mêmes un anti-pattern UX. Le bouton Activer se trouve dans l’accordéon paramètres. Qui utilise les notifications système doit aussi avoir accordé la permission dans les paramètres de site du navigateur ; en « Bloqué », l’outil affiche un message correspondant et l’alarme audio reste la seule source de signal.

Le Wake-Lock ne fonctionne que tant que l’onglet est au premier plan. Au changement d’onglet, le lock est libéré automatiquement pour économiser la batterie — c’est le comportement standard du navigateur, spécifié ainsi par le W3C. Qui veut garder l’écran éveillé même avec un onglet caché a besoin d’un programme installé — un outil navigateur ne peut pas le faire.

Quels outils liés existent ?

Le minuteur fait partie d’une famille d’outils temps. Le Calculateur d’âge calcule l’âge depuis une date de naissance avec bascule de méthode. Le Calculateur de date livre le nombre de jours entre deux dates ou la date après N jours — complémentaire au compte à rebours événementiel, quand vous voulez « quelle date » plutôt que « combien de temps reste ».

Le Convertisseur de fuseaux horaires convertit des heures concrètes entre fuseaux — pendant du compte à rebours événementiel quand votre événement est une heure locale dans un fuseau étranger (par ex. « Live-Stream 14:00 PST »). Le Convertisseur de timestamp Unix est la variante développeur des outils temps et convertit entre secondes UTC et chaînes Wall-Clock.

Qui cherche le mode Pomodoro séparément comme hub-page doit utiliser ici l’onglet complet — une page pomodoro-timer propre est dans le backlog, mais ne sera construite que si les données GSC montrent que la requête Pomodoro est suffisamment forte pour justifier un slug propre.