Веб-приложение · PWA · нативный JS
Офлайн-приложение курьера
Курьер, выездной мастер или торговый представитель часто работают там, где связь пропадает: в подвале, лифте, за городом. Обычное веб-приложение в этот момент перестаёт открываться, а отметки «доставлено» теряются. Здесь всё сохраняется на телефоне и отправляется само, как только появится сеть, — с повторами, без дублей и без потери фото.
Сценарий: Курьер обжарочной «Зерно» — вымышленной — развозит пять заказов: кофейни, офис и частные клиенты.
Открыть демо
Удобнее с телефона: приложение можно установить на главный экран. Сеть выключается переключателем вверху или по-настоящему — режимом полёта.
Приложение работает в браузере: на сервер ничего не отправляется.
Что показывает демо
Как попробовать
Выключите сеть
Переключателем «Сеть: нет» или режимом полёта. Перезагрузите страницу — приложение откроется.
Вручите заказ
«Доставлен» → «Тестовое фото» или камера, подпись пальцем, комментарий. Заказ помечен «не отправлено».
Верните сеть
Очередь уйдёт в диспетчерскую — журнал покажет, что и когда отправлено. На «плохой» связи видны повторы.
Разыграйте конфликт
Кнопка «Разыграть конфликт»: вы без сети уточняете адрес, а диспетчер его меняет. Выберите верную версию.
Без платных нейросетей
Диспетчерская здесь — имитация в браузере: своя база и задержки сети, как у настоящего сервера. Заказы, фото и подписи хранятся на вашем устройстве и никуда не отправляются. В рабочем проекте очередь уходит на сервер с API, диспетчер видит заказы в своей панели, а клиенту приходит уведомление о доставке.
Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.
Что будет в рабочем проекте
- Сервер с API заказов и панель диспетчера с картой и статусами курьеров
- Маршрут и геопозиция, уведомления клиенту в Telegram, Max или SMS
- Вход курьера, роли и журнал действий для разбора спорных доставок
- Связка с 1С, МойСклад или CRM: заказы приходят оттуда, статусы и фото возвращаются
Стек
- Все демо по стеку:
- Нативный JS
- JavaScript без фреймворков
- Service Worker
- IndexedDB
- Background Sync
- Canvas
- Pointer Events
- BroadcastChannel
- Web Locks
- Vite
Основано на
Книги и дисциплины, идеи из которых работают в этом демо.
Книга · Джон Литтл
Внутренний воин
Обрыв связи — не повод остановиться: приложение работает без сети и отправляет изменения, когда связь вернётся.
Книга · Харви Дейтел, Пол Дейтел, Дэвид Чофнес
Операционные системы. Основы и принципы
Если курьер без сети и диспетчер изменили один и тот же заказ, конфликт не решается молча «кто последний записал» — курьер выбирает, чья версия верная.
Книга · Алексей Васильев
Программирование на JavaScript в примерах и задачах
Приложение курьера на JavaScript без фреймворков: подпись клиента пальцем на Canvas и Pointer Events, сжатие фото прямо на телефоне.
Книга · Эндрю Таненбаум, Херберт Бос
Современные операционные системы
Service Worker хранит приложение на устройстве, а очередь изменений отправляется по порядку с растущей паузой на плохой связи.
Комментарий от разработчика
Антон Гончаров
Разработчик ИИ-систем · Python
Для бизнеса
- Отметки «доставлено» и фото не теряются в подвале или за городом — уйдут, когда появится сеть.
- Спорные доставки разбираются по фото и подписи, а не по словам курьера.
- Если адрес поменяли и курьер, и офис, правка не перезаписывается молча — курьер выбирает верную версию.
Для разработчиков
- Service Worker написан вручную и кеширует сборку целиком; список файлов и версию подставляет плагин Vite.
- Заказы и очередь изменений — в IndexedDB. Отправка по порядку с растущей паузой, Background Sync и Web Locks против двойной отправки.
- Фото сжимается на Canvas в WebP, подпись рисуется через Pointer Events, вкладки синхронизируются через BroadcastChannel.
Советы
Совет 01
Закладывайте работу без сети с первого дня: прикрутить её к готовому приложению почти так же дорого, как написать заново.
Совет 02
Давайте каждому изменению свой идентификатор: повтор после обрыва не должен создавать дубль.
Нужен такой же для вашего бизнеса?
Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.
Другие демо в этом разделе
Все демо- работает
Веб-приложение · OCR · проверка реквизитов
Распознавание документов
Загрузите счёт или акт — фото, скан или PDF. Приложение распознаёт текст, вытаскивает реквизиты и строки таблицы и проверяет их: контрольные суммы ИНН и счетов, итог и НДС.
- React
- TypeScript
- Нейросеть в браузере
- работает
Веб-приложение · диалоги · сделки · аналитика
Панель оператора
Рабочее место оператора, которому бот передаёт сложные обращения: очередь с таймером, резюме диалога, черновик ответа, сделки на канбане и аналитика — на живом потоке клиентов.
- React
- TypeScript
- работает
Веб-приложение · Recharts · RBAC · аудит
SaaS-дашборд
Кабинет команды выручки SaaS: MRR по тарифам, движение выручки, отток, здоровье клиентов, выгрузка CSV для Excel и журнал действий. Все цифры считаются из одной истории за год — смена тарифа в карточке клиента сразу двигает MRR на графиках.
- React
- TypeScript
- работает
Веб-приложение · Laravel · PostgreSQL
Складской контур на Laravel
Учёт склада, где остаток — сумма проводок, а не «поле qty--»: заказы с резервом «всё или ничего», сборка по ячейкам, приёмка с импортом CSV, инвентаризация и журнал. Гонка двух настоящих процессов PHP в PostgreSQL показывает, зачем нужна блокировка строки.
- PHP
- работает
Веб-приложение · метрики · оповещения
Мониторинг бота
Как следят за ботом, когда он уже работает с клиентами: сколько запросов, как быстро он отвечает, как часто ошибается или не знает ответа. Журнал запросов с трассой каждого ответа и правила, которые пишут дежурному в Telegram, если что-то пошло не так.
- React
- TypeScript
- работает
Парсер на Python · работает в браузере
Мониторинг цен конкурентов
Парсер на Python каждый день обходит сайты трёх конкурентов магазина электроники: HTML-каталог с пагинацией, sitemap с JSON-LD и SPA с API. Сопоставляет товары с каталогом, присылает уведомления об изменениях, рекомендует цену по правилам и выгружает отчёт в Excel. Python работает прямо в браузере.
- Python
- React
- TypeScript