Таймер Помодоро

Таймер Pomodoro поддерживает технику Pomodoro — метод управления временем с четкими интервалами фокуса и отдыха. Классическая схема: 25 минут сосредоточенной работы, короткий перерыв около 5 минут и более длинный отдых после нескольких циклов. Ценность не в точной цифре, а в границе: задача кажется меньше, отвлечения можно отложить, а паузы не дают вниманию незаметно снижаться. Инструмент полезен для учебы, письма, программирования, домашних дел, административной работы и рутин, где помогает ритм. Для встреч, глубокого творческого потока, ухода за близкими или физически тяжелой работы длительность сессий и перерывов лучше адаптировать. При совместном использовании нужно заранее прояснить входные данные, допущения и ожидаемый результат, чтобы вывод не поняли неверно.

Техника Помодоро была опубликована Франческо Чирилло в конце 1980-х годов и формализует четырёхфазный цикл: 25-минутный интервал концентрации (один помидор), 5-минутный короткий перерыв, повторяется четыре раунда, затем 15-30-минутный длинный перерыв. Расписание представляет собой конечный автомат с четырьмя состояниями (`work`, `shortBreak`, `longBreak`, `idle`), переходы которого управляются единственным таймером обратного отсчёта; счётчик раундов увеличивается после каждого перехода `work -> break`, а ветка длинного перерыва срабатывает при `round % roundsBeforeLong === 0`. Варианты вроде 50/10 (глубокая работа) и 52/17 (исследование продуктивности Draugiem Group) реализуются параметризацией того же автомата. Наивный подход использует `setInterval(tick, 1000)` и декрементирует счётчик, но в JavaScript таймеры накапливают дрейф: каждый вызов может сработать с задержкой 1003-1020 мс при загрузке основного потока, а HTML5 Page Visibility API в сочетании с политикой браузера ограничивает таймеры скрытых вкладок примерно до 1 Гц в Chrome/Firefox/Safari (Safari может опускаться до 1 срабатывания/мин). Устойчивый к дрейфу подход сохраняет `endTimestamp = performance.now() + remainingMs` при старте, а затем пересчитывает `remainingMs = Math.max(0, endTimestamp - performance.now())` на каждом тике — поэтому вкладка, вернувшаяся из фона после 10 минут, немедленно догоняет, а не отсчитывает 10 выдуманных секунд. `performance.now()` — это высокоточный монотонный часы, невосприимчивые к корректировкам системного времени (NTP, ручное изменение часов); `Date.now()` используется только для сохранения дедлайна при обновлении страницы. Четыре браузерных API делают таймер удобным во время работы в другом окне. Web Audio API генерирует сигнал окончания фазы без затрат на аудио-ресурсы: `new AudioContext()` -> `createOscillator()` на 800 Гц -> `createGain()` с плавным затуханием за 200 мс -> `start()` затем `stop(currentTime + 0.2)`. Notifications API показывает системное уведомление после однократного согласия через `Notification.requestPermission()`, затем `new Notification('Focus complete', { body, icon, tag: 'pomodoro' })` (тег `tag` дедуплицирует быстрые срабатывания). Wake Lock API запрашивает `navigator.wakeLock.request('screen')` для удержания экрана включённым во время сессии фокусировки и освобождает его во время перерывов. `document.title` перезаписывается на каждом тике в `mm:ss - Focus`, чтобы время оставалось видимым на панели вкладок. Настройки (длительности, автостарт, звук) сохраняются через `localStorage` (синхронный, квота ~5 МБ на источник); круговой прогресс реализован SVG-элементом `<circle>` с `stroke-dasharray = 2 * pi * r` и анимацией `stroke-dashoffset = dasharray * (1 - elapsed/total)` без использования canvas. Исследования внимания — граница в 25 минут у Чирилло, а также работа над восприятием времени при ADHD и стоимость переключения контекста — объясняют, почему жёсткое прерывание лучше мягкого «ещё пять минут».

• Конечный автомат с четырьмя состояниями (work/shortBreak/longBreak/idle); длинный перерыв срабатывает при `round % roundsBeforeLong === 0`. По умолчанию 25/5/15 минут, 4 раунда; варианты 50/10/30 (глубокая работа) и 52/17 (исследование Draugiem).
• Устойчивый к дрейфу таймер: сохраняется `endTimestamp = performance.now() + remainingMs` и пересчитывается `remainingMs = endTimestamp - performance.now()` на каждом тике — невосприимчив к проскальзыванию `setInterval` и к ограничению частоты скрытых вкладок.
• `performance.now()` — высокоточный монотонный часы (не зависит от NTP или ручного изменения системного времени); `Date.now()` используется только для сохранения дедлайна при перезагрузке страницы.
• Сигнал окончания фазы через Web Audio API: `new AudioContext()` -> `createOscillator()` (синусоида 800 Гц) -> `createGain()` с линейным затуханием до 0 за 200 мс -> `start()`/`stop()`. Нулевые затраты на аудио-ресурсы.
• Системные уведомления через Notifications API: `Notification.requestPermission()` однократно, затем `new Notification(title, { body, tag: 'pomodoro' })`; тег `tag` дедуплицирует, если несколько фаз завершаются при скрытой вкладке.
• Блокировка экрана через Wake Lock API: `navigator.wakeLock.request('screen')` во время фокусировки для предотвращения засыпания экрана; освобождение при перерыве. Блокировки автоматически снимаются при потере видимости вкладки и должны быть повторно запрошены при `visibilitychange`.
• Сохранение и интерфейс: `localStorage` (~5 МБ квота) для длительностей/автостарта/звука; SVG-кольцо использует `stroke-dasharray = 2*pi*r` и анимирует `stroke-dashoffset`; `document.title` перезаписывается в `mm:ss - Фаза` для видимости на панели вкладок.