Клиенты звонят: где заказ или мастер
У вас собственная курьерская или выездная служба, а клиент видит только «в пути». Диспетчер отвечает на звонки вместо работы. Нужен экран, где статус и положение меняются сами.
Real-time сервис с геолокацией: живые статусы, карта и установка на экран (PWA)
Real-time веб-сервис с геолокацией — это приложение, где пользователь видит живые статусы и точки на карте без перезагрузки страницы: где курьер или мастер, сколько человек в очереди, какой пункт выдачи ближе. Делаем его как адаптивное веб-приложение с установкой на экран телефона (PWA), без магазинов приложений. Сначала выясняем, что браузер умеет на ваших устройствах, а что нет.
Обследование — от 200 000 ₽, вычитается из первого этапаЖивые статусы и карта в браузере, PWA вместо магазинов приложенийКоординаты хранятся минимально, код в вашем репозитории
С чем приходят
Когда нужен сервис с живыми статусами и картой
Статус обновляется только после перезагрузки
Данные устаревают: люди жмут «обновить», а сервер получает лишние запросы. Лечится способом доставки обновлений, а не кнопкой.
Нативное приложение не окупается
Магазины приложений, две платформы, установка у каждого клиента ради одного заказа. Часто хватает веб-приложения, которое открывается по ссылке и ставится на экран.
Непонятно, что вообще умеет браузер
Позиция в фоне, уведомления, работа без сети: часть этого есть, часть нет, а часть зависит от телефона. Это выясняется до разработки, а не на приёмке.
Типы сервисов
Пять типов сервисов с картой и живыми статусами
Сервисы разные, ломаются они в предсказуемых местах. Общие решения — в статье «Геолокация и обновления в реальном времени в веб-сервисе».
Тип сервиса
Что видит пользователь
Что происходит внутри
Где ломается
Тип сервисаОтслеживание выездакурьер, мастер, инженер
Что видит пользовательЗаказчик видит точку на карте и ожидаемое время прибытия
Что происходит внутриИсполнитель передаёт позицию со своего телефона, сервер сглаживает её и рассылает подписчикам заказа
Где ломаетсяЭкран телефона гаснет, позиция перестаёт приходить, клиент видит застывшую точку без пометки
Тип сервисаПоиск ближайшей точкипункт выдачи, сервисный центр
Что видит пользовательСписок и карта ближайших точек с наличием и временем работы
Что происходит внутриЗапрос по радиусу в базе с пространственным индексом, наличие приходит из учёта
Где ломаетсяАдрес в учёте записан текстом без координат, наличие устарело, человек не дал доступ к позиции
Тип сервисаЖивая очередьприём, сервисный центр, мероприятие
Что видит пользовательНомер в очереди, оценка ожидания и сообщение «подходите»
Что происходит внутриОчередью управляет сервер, клиенты подписаны на изменения своего талона
Где ломаетсяОдин человек открыл два окна, талон не снимается при уходе, оценка времени считается по среднему
Тип сервисаРабочее место диспетчеракарта и список заявок
Что видит пользовательВсе выезды на одном экране, назначение и перераспределение
Что происходит внутриПоток событий от многих исполнителей, фильтрация по зоне и статусу
Где ломаетсяЭкран перегружен точками, частое обновление тормозит браузер
Доставка обновлений
Опрос, поток событий, WebSocket или уведомление: что и когда
Выбираем самый простой способ, который выдерживает задачу. Переход на более сложный не требует переписывать остальное, если состояние хранится на сервере.
Способ
Когда подходит
Что учесть
Что при обрыве
СпособПериодический опроссамый простой
Когда подходитСтатус раз в минуту и реже, редкие изменения
Что учестьНагрузка растёт с числом открытых страниц, даже когда ничего не меняется
Что при обрывеСледующий запрос сам подхватит актуальное состояние
СпособПоток событий (SSE)сервер сообщает клиенту
Когда подходитСтатусы, счётчики, точка исполнителя у клиента
Что учестьИдёт в одну сторону; прокси и балансировщики не должны обрывать долгое соединение
Что при обрывеБраузер переподключается сам, но состояние нужно дослать
СпособWebSocketдвусторонний обмен
Когда подходитЭкран диспетчера, команды, частая передача позиции с телефона
Что учестьНужно держать много соединений, делить их между серверами и следить, что они живы
Что при обрывеПереподключение и запрос пропущенного пишем сами
СпособPush-уведомлениепользователь не на странице
Когда подходитКурьер подъезжает, талон вызван, заказ готов
Что учестьЗависит от платформы, версии и разрешения
Что при обрывеЭто подсказка: главное состояние лежит на сервере, критичное дублируем
Надёжность
Почему событие не заменяет состояние
Главное правило любого сервиса реального времени: потерять сообщение можно всегда, потерять состояние нельзя.
Сеть на телефоне пропадает, вкладка засыпает, балансировщик закрывает простаивающее соединение. Поэтому сервер хранит текущее состояние заказа, очереди или исполнителя в базе, а событие говорит клиенту «перечитай». Потерянное сообщение ничего не ломает: при возврате страница запрашивает актуальное состояние и дальше слушает изменения.
- Порядок и повторы. Событие приходит с номером версии: старое не затирает новое, повтор не меняет результат.
- Частота. Позицию шлём не чаще, чем она меняет картину: лишние сообщения расходуют батарею и сервер.
- Права и несколько серверов. Подписка на заказ проверяется по правам, а между серверами события ходят через общий канал (Redis или очередь).
Подробнее о повторах и версиях — в статье «Проектирование API для интеграций».
Геолокация
Что даёт и чего не даёт позиция из браузера
Позиция из браузера хороша для карты и поиска «рядом». Для решений она требует проверки на сервере.
Что даёт браузер
Координаты вместе с радиусом погрешности. Страница должна открываться по HTTPS, а человек должен дать согласие в системном запросе. Точность зависит от устройства: телефон со спутниковым приёмником определяет место лучше, чем компьютер по сетям Wi-Fi, а в здании и во дворах-колодцах точка уходит.
Чего браузер не даёт надёжно
Позицию в фоне. Когда экран гаснет, а вкладка уходит в фон, обновления на телефоне могут остановиться, и это зависит от устройства и версии системы. Поэтому «следить за курьером с телефоном в кармане» веб-приложением надёжно не решается. Есть три выхода: исполнитель держит сервис открытым (телефон в держателе, экран включён), позицию присылает трекер в машине через его программный интерфейс, либо нужно нативное приложение, которое мы не делаем. Мы называем это на обследовании, а не после запуска.
Запасные пути и проверка
Если человек отказал в доступе, есть ввод адреса и выбор точки на карте: сервис без позиции не блокируем. Рядом с точкой показываем возраст данных. Для важных решений сервер проверяет правдоподобие: скачки скорости, радиус погрешности, согласие с адресом.
PWA
Что даёт PWA, а где у неё границы
PWA — это адаптивное веб-приложение, которое можно поставить на экран телефона. Нативные приложения для iOS и Android мы не делаем. Сравнение подходов — в статье «PWA или нативное приложение».
Возможность
Что получает пользователь
Ограничение
Как закрываем
ВозможностьУстановка на экранзначок как у приложения
Что получает пользовательСервис открывается без адресной строки, как приложение
ОграничениеВ магазинах приложений сервиса нет; способ установки отличается у iPhone и Android
Как закрываемПодсказка по установке; без установки сервис работает так же
ВозможностьРабота без сетикэш и очередь действий
Что получает пользовательОткрывается оболочка и последние данные, действие отправляется при появлении связи
ОграничениеЖивых данных без сети нет; отложенное действие может устареть
Как закрываемПомечаем «данные на 14:20», отложенные действия проверяем при отправке
ВозможностьУведомленияpush вне страницы
Что получает пользовательСообщение приходит, когда сервис закрыт
ОграничениеЗависит от платформы, версии и разрешения; на iPhone — у сервиса, добавленного на экран «Домой»
Как закрываемПроверяем на ваших устройствах; критичное дублируем SMS или звонком
ВозможностьПозиция в фонененадёжна в браузере
Что получает пользовательСлежение при погашенном экране
ОграничениеОбновления на телефоне могут останавливаться, зависит от устройства и версии системы
Как закрываемГоворим на обследовании; обходы: экран включён, внешний трекер, нативная программа
Приватность
Координаты человека: технические меры
Собираем минимум
Позицию запрашиваем только когда сценарию она нужна. Для поиска ближайшей точки хватает разового запроса, постоянное слежение не включаем.
Храним недолго
Маршрут хранится ограниченное время, срок записываем до запуска и удаляем по расписанию.
Показываем только своё
Клиент видит исполнителя по своему заказу, пока заказ активен. Просмотры истории диспетчером попадают в журнал.
Объясняем, зачем
Перед системным запросом человек видит, для чего нужна позиция. Текст согласия и статус оператора персональных данных решает юрист заказчика, мы даём технические меры.
Что делаем
Из чего состоит работа и сколько она стоит
Цены совпадают со страницей «Тарифы». Точная цена только у обследования, дальше вилка, которая сужается по его результатам. Остановиться можно после любой ступени.
Обследование: один сервис и одна-две системы
Кто и зачем передаёт позицию, что видят остальные, какие устройства у людей. На выходе ограничения браузера на ваших телефонах, способ доставки обновлений, схема хранения и вилка бюджета. Вычитается из первого этапа, если продолжаете с нами.
200 000 ₽ · 2–3 недели
Обследование: сервис и несколько систем
Если статусы и наличие приходят из 1С, склада, CRM и системы маршрутизации: схема обменов и матрица источников истины.
350 000 ₽ · 3–4 недели
Лёгкий пилот: один сценарий
Например, карта выезда мастера для одной группы заказов: один тип исполнителей, чтение из учёта, протокол испытаний на реальных устройствах. Показывает, нужен ли сервис людям и держит ли браузер ваш сценарий.
150 000–400 000 ₽ · 2–8 недель
Первая версия (тяжёлый пилот)
Роли, главный сценарий с картой и живыми статусами, обмен с учётом, уведомления, журнал, установка на экран, протокол испытаний. Это MVP, а не система в ежедневной эксплуатации.
400 000–1 200 000 ₽ · 2–3 месяца
Вывод в эксплуатацию
Опытная эксплуатация, нагрузочные испытания по числу соединений, мониторинг, копии с проверкой восстановления, обучение, передача исходников.
от 1 500 000 ₽ этапами по 300 000–700 000 ₽ · от 3 месяцев
Сопровождение
Мониторинг, обращения, разбор инцидентов; плановые доработки с пакета на 60 000 ₽. Сверх пакета — 5 000 ₽ в час.
20 000 / 60 000 / 120 000 ₽ в месяц
Процесс
Как идёт работа
2–4 недели — Обследование
Разбираем сценарий на примерах: кто передаёт позицию, кто смотрит, как часто что меняется. Проверяем на ваших устройствах позицию, работу в фоне и уведомления.
Перед разработкой — Макеты интерфейса
Кликабельные макеты ключевых экранов на обезличенных данных, включая состояние «нет данных». Правим до написания кода.
Первые недели — Основа и состояние
Репозиторий, сборка, стенд, модель данных, права. Один способ доставки обновлений на одном сценарии, остальное позже.
Дальше — Карта, статусы и обмены
Подключаем карту, обмен с учётом, уведомления и установку на экран. Раз в две недели показываем работающую версию.
Приёмка — Полевая проверка
Реальные устройства: отказ в доступе, погашенный экран, слабая связь, обрыв потока, расход батареи. Приёмка идёт по протоколу, согласованному заранее.
Дальше — эксплуатация или остановка
Нагрузочные испытания и новые сценарии идут этапами с отдельной приёмкой. Сопровождение у нас или у вас: решаете вы.
Цена
Что двигает цену внутри вилки
Число ролей и сценариев
Клиент и один тип исполнителей — одно. Клиент, исполнитель, диспетчер и руководитель с разными правами на карту и историю — другое.
Частота и число соединений
Позиция раз в минуту у нескольких десятков исполнителей и раз в секунды у многих — разные архитектуры.
Источники данных
Если статусы, адреса и наличие приходят из разных систем, часть работы уйдёт на обмен. Адреса без координат нужно сначала привести к координатам.
Требования к устройствам
Список телефонов, на которых всё должно работать, определяет объём проверок.
Контроль
Что остаётся у вас и чего мы не делаем
Остаётся у вас
- Исходный код сервиса в вашем репозитории с первого коммита.
- База, файлы и учётные записи на ваших серверах или у выбранного вами хостера, инструкция по развёртыванию.
- Описание способа доставки обновлений, схемы хранения координат и срока их хранения.
- Ключи и договоры с картографическим провайдером, оформленные на вас.
- Право остановиться после любой ступени: сделанное остаётся у вас по акту.
Мы этого не делаем
- Не делаем нативные приложения для iOS и Android и не публикуем в магазинах приложений: делаем адаптивное веб-приложение, в том числе устанавливаемое на экран (PWA).
- Не делаем скрытое слежение за людьми: позиция передаётся с согласия и показывается тем, кому положено.
- Не делаем маркетплейсы и агрегаторы с чужими продавцами или исполнителями, платёжные и финтех-продукты. Платежи принимает ваш эквайринг, данные карт мы не храним.
- Не поставляем карты, трекеры и серверы: условия определяет провайдер, договор заключаете вы.
- Юридические вопросы согласия и статуса оператора персональных данных решает юрист заказчика. Лицензии ФСТЭК у нас нет, аттестацию не проводим.
- Не берём работы дешевле 150 000 ₽ и не дежурим круглосуточно: в сопровождении записываем время реакции и часы пакета.
Граница
Real-time сервис, веб-сервис, SaaS и кабинет: где граница
Если вам нужен интерфейс для клиентов и сотрудников поверх учёта без живых данных и карты, достаточно личного кабинета. Если сервис имеет свою логику и данные, но живые статусы нужны только как мелкая деталь, это веб-сервис с обновлением по расписанию. Если вы продаёте доступ к сервису другим компаниям со своими пользователями и тарифами, это SaaS-платформа.
Если сервис будет расти по числу одновременных пользователей, это отдельный разбор архитектуры: см. страницы про микросервисы и высокую нагрузку и высоконагруженный B2C-сервис.
Граница нестрогая: сервис с картой может вырасти в платформу, поэтому права, разделение данных и хранение состояния закладываем так, чтобы расширять без переписывания.
Инструменты
На чём собираем
Серверная часть и данные
- Python: Django или FastAPI, при необходимости Go
- PostgreSQL с расширением PostGIS для запросов по радиусу и границам зон
- Redis или совместимое хранилище для кэша и общего канала событий между серверами
- Поток событий (SSE) или WebSocket, выбор по задаче на обследовании
Интерфейс, карты и развёртывание
- React или Vue, TypeScript, адаптивная вёрстка и PWA со своим кэшем и уведомлениями
- Карты: Яндекс Карты, 2ГИС или карты на основе OpenStreetMap, по требованиям заказчика
- Docker, Nginx, GitLab CI
- Журнал действий, мониторинг числа соединений и задержки доставки
Материалы
Материалы по теме
Геолокация и обновления в реальном времени в веб-сервисе
Что умеет браузер, как запросить позицию, чему верить в координатах и как выбрать между опросом, SSE и WebSocket.
- Разрешение на позицию
- Способы доставки
- Проверка в поле
PWA или нативное приложение: что выбрать
Когда хватает веб-приложения с установкой на экран, а когда нужна нативная программа.
- Возможности PWA
- Границы
- Критерии выбора
Проектирование API для интеграций
Версии, повторы запросов и вебхуки: правила, нужные и интеграциям, и живым обновлениям.
- Идемпотентность
- Версии
- Чек-лист приёмки
Заявка
Разберём ваш сервис с картой и живыми статусами
Сорок минут созвона: кто передаёт позицию, кто смотрит, на каких устройствах и откуда берутся данные. По итогам скажем, что реально сделать в браузере и в какую вилку это укладывается.
Вопросы
Частые вопросы: real-time сервис с геолокацией
Сколько стоит разработка real-time сервиса с геолокацией?
Обследование стоит 200 000 ₽ (350 000 ₽, если сервис связан с несколькими системами). Лёгкий пилот одного сценария — 150 000–400 000 ₽ за 2–8 недель, первая версия — 400 000–1 200 000 ₽ за 2–3 месяца. Вывод в эксплуатацию от 1 500 000 ₽ этапами. Точную цену называем после обследования.
Можно ли обойтись PWA, без нативного приложения?
Для большинства сценариев с открытым экраном можно: карта, статусы, очередь, уведомления, установка на экран. Ограничения касаются позиции в фоне и поведения уведомлений на разных платформах. Мы проверяем их на ваших устройствах на обследовании. Нативные приложения мы не делаем.
Можно ли отслеживать курьера через браузер?
Да, пока приложение открыто и экран включён. При погашенном экране обновления могут остановиться. Решения: телефон в держателе с включённым экраном, позиция из трекера в машине через его программный интерфейс или нативное приложение.
Что выбрать: WebSocket, поток событий или опрос?
Самый простой способ, который выдерживает задачу. Статус раз в минуту — опрос. Позиция исполнителя у клиента — поток событий (SSE) или WebSocket. Диспетчерский экран с командами — WebSocket. Выбор подтверждаем на обследовании по частоте и числу слушателей.
Как хранятся координаты и кто их видит?
Текущая позиция перезаписывается, маршрут хранится ограниченное время, срок записывается до запуска. Клиент видит исполнителя по своему заказу, диспетчер больше, просмотры пишутся в журнал. Юридические вопросы согласия решает юрист заказчика.
Выдержит ли сервис много пользователей одновременно?
Нагрузку считаем по числу одновременных соединений и сообщений в секунду, а не по числу регистраций. Нагрузочные испытания проводим при выводе в эксплуатацию на обезличенных или сгенерированных данных.
Кому принадлежит код и где работает сервис?
Исходный код лежит в вашем репозитории с первого коммита. Сервис работает на ваших серверах или у выбранного вами хостера. Порядок передачи прав записывается в договоре. Персональные данные граждан России обычно должны храниться на серверах в России.
Вы работаете только в Ростове-на-Дону?
Мы в Ростове-на-Дону, работаем с заказчиками по всей России: удалённо и в вашем контуре. Доступ к системам и обследование согласуем на старте с вашей службой безопасности.
Смежное
Что посмотреть рядом
- Разработка веб-сервисов и веб-приложений на заказ
- Разработка SaaS-платформы на заказ
- Разработка личного кабинета
- Разработка API и бэкенда
- Микросервисная архитектура и высокая нагрузка
- Высоконагруженный B2C-сервис
- Интеграция 1С с CRM, сайтом и маркетплейсами
- Цены и сроки по ступеням
- Геолокация и real-time в веб-сервисе
- PWA или нативное приложение
- Проектирование API для интеграций