🎧 Drops Навигатор

Лёгкое веб-приложение (PWA): задаёшь адрес — оно голосом ведёт по маршруту в подключённые наушники, телефон можно убрать в карман. Без открытия Яндекс Карт.

Наушники тут — обычный Bluetooth-выход: приложение работает на телефоне и озвучивает подсказки, а звук уходит в наушники, как любая музыка.

Как это работает

• Геолокация телефона (watchPosition) — следим за позицией.
• Маршрут с манёврами — публичный сервер OSRM (бесплатно, без ключа). Адрес → координаты — Nominatim (OpenStreetMap) или Яндекс.Геокодер, если указать ключ.
• Движок навигации (js/nav.js) — привязка к маршруту, расчёт до манёвра, своевременная озвучка, детект схода с маршрута и автопересчёт.
• Озвучка — Web Speech API (русский голос системы).
• PWA — ставится «как приложение», не гаснет экран (Wake Lock), кеш оболочки.

Запуск локально (для проверки на компьютере)

Нужен любой статический http-сервер (модули и геолокация не работают через file://). Из папки проекта:

# Python (есть почти везде)
python -m http.server 8000
# или Node
npx serve .

Откройте http://localhost:8000. На localhost геолокация и речь работают без HTTPS. На компьютере «позиция» будет приблизительной (по Wi-Fi/IP) — это нормально для теста.

Чтобы пользоваться на телефоне — нужен HTTPS

Геолокация, синтез речи и установка PWA работают только в защищённом контексте (https:// или localhost). Просто открыть файл с телефона нельзя — приложение должно «лежать» по адресу с HTTPS. Варианты, все бесплатные:

Вариант 1. GitHub Pages (рекомендую — постоянный адрес)

1. Создайте репозиторий на GitHub, загрузите туда содержимое этой папки.
2. Settings → Pages → Source: ветка main, папка / (root) → Save.
3. Через минуту приложение будет по адресу https://<логин>.github.io/<репо>/.
4. Откройте этот адрес в браузере телефона.

Вариант 2. Netlify / Cloudflare Pages / Vercel (перетащил папку — готово)

• app.netlify.com/drop — перетащите папку в окно, получите ссылку https://...netlify.app. Бесплатно, без настройки.
• Cloudflare Pages и Vercel — то же самое через их веб-интерфейс или CLI.

Вариант 3. Быстрый туннель к своему компьютеру (на пять минут попробовать)

Запустите локальный сервер (см. выше) и проброс наружу:

npx localtunnel --port 8000      # выдаст https://....loca.lt
# или: cloudflared tunnel --url http://localhost:8000

Откройте выданный https://-адрес на телефоне. Работает, пока запущен компьютер.

Установить как приложение (необязательно, но удобно)

Открыв сайт на телефоне:

• Android/Chrome: меню ⋮ → «Установить приложение» / «Добавить на главный экран».
• iPhone/Safari: Поделиться → «На экран Домой».

После этого «Drops» запускается с иконки в полноэкранном режиме.

На iPhone есть ограничение: фоновая работа Safari урезана — для длинных поездок держите экран включённым (Wake Lock помогает) или приложение открытым.

Как пользоваться

1. Подключите наушники к телефону.
2. Откройте приложение, нажмите «Проверить звук» — должна прозвучать фраза в наушниках. (Это же действие разблокирует синтез речи на мобильных — нужно нажать руками.)
3. Введите адрес (или 🎙️ продиктуйте), нажмите «Старт».
4. Уберите телефон в карман — дальше всё голосом. «Стоп» завершает.

Настройки (в приложении)

• Тип маршрута: авто / велосипед / пешком.
• Голос вкл/выкл и скорость речи.
• Ключ Яндекс.Геокодера — если хотите геокодинг от Яндекса вместо OpenStreetMap.

Структура

index.html              UI
css/style.css           стили
js/app.js               связывает UI, GPS, движок и озвучку
js/geo.js               гео-математика и привязка к маршруту
js/routing.js           геокодер + построение маршрута (OSRM/Nominatim/Яндекс)
js/instructions.js      манёвры OSRM → русские фразы
js/nav.js               движок: озвучка манёвров, сход с маршрута
js/voice.js             синтез речи
js/storage.js           настройки в localStorage
manifest.webmanifest    PWA-манифест
sw.js                   сервис-воркер (оффлайн-кеш)
icons/icon.svg          иконка

Ограничения и заметки

• Публичные демо-серверы OSRM/Nominatim — для личного нечастого использования. Для регулярных поездок поднимите свой OSRM (адрес можно задать в js/storage.js, поле osrmUrl) — это снимет лимиты и даст корректный пеший/вело-профиль.
• iOS ограничивает фоновую работу браузера — см. примечание про установку.
• Это не замена полноценному навигатору: нет пробок и offline-карт. Зато ничего не нужно открывать и разглядывать — только слушать.