Урок 4. Веб-интерфейс и PWA#
Зачем это нужно#
В прошлом уроке вы открыли HAPI в браузере телефона. Но каждый раз открывать браузер и вводить адрес неудобно. В этом уроке мы установим HAPI как приложение на телефон — с иконкой на главном экране, как обычная программа.
Что такое PWA#
PWA (Progressive Web App — «прогрессивное веб-приложение») — это сайт, который можно установить на телефон как обычное приложение. После установки:
- 📱 На главном экране появится иконка HAPI
- 🖥️ Приложение откроется на весь экран (без адресной строки браузера)
- 🔔 Вы будете получать уведомления (когда AI-агент ждёт вашего ответа)
- 🔄 Приложение обновляется само — всегда последняя версия
💡 PWA не нужно скачивать из App Store или Google Play. Оно устанавливается прямо из браузера.
Установка на Android#
- Откройте HAPI в Chrome или Edge
- Внизу экрана появится баннер «Установить HAPI» — нажмите на него
- Подтвердите установку
- Готово! Иконка HAPI появится на главном экране
💡 Если баннер не появился: нажмите три точки (⋮) в правом верхнем углу Chrome → «Установить приложение» или «Добавить на главный экран».
Установка на iPhone (iOS)#
На iPhone установка работает только через Safari (не Chrome, не Firefox):
- Откройте HAPI в Safari
- Нажмите кнопку «Поделиться» (квадрат со стрелкой вверх ↑)
- Прокрутите вниз и нажмите «На экран Домой»
- Нажмите «Добавить» в правом верхнем углу
- Готово!
⚠️ На iOS обязательно используйте Safari. Другие браузеры на iPhone не поддерживают установку PWA.
Установка на компьютер#
HAPI можно установить и на компьютер как отдельное приложение:
- Откройте HAPI в Chrome или Edge
- В адресной строке справа нажмите значок установки (⊕)
- Или в меню: «Установить HAPI…»
- HAPI откроется в отдельном окне
Основные возможности интерфейса#
Список сессий#
Главный экран показывает все ваши сессии с AI-агентами:
- Активные — помечены зелёным, работают прямо сейчас
- Завершённые — серые, можно посмотреть историю
Чат с AI-агентом#
Нажмите на любую сессию, чтобы открыть чат:
- Вы видите всю переписку (и свои сообщения, и ответы AI)
- Можете отправить новое сообщение
- AI-агент отвечает в реальном времени
Одобрение запросов#
Когда AI-агент хочет что-то сделать (отредактировать файл, выполнить команду), он просит разрешение. Вы увидите уведомление и сможете:
- ✅ Одобрить — агент продолжит работу
- ❌ Отклонить — агент не выполнит действие
Просмотр файлов#
Во вкладке «Files» можно:
- Просмотреть файлы проекта
- Увидеть, что изменил AI-агент
- Посмотреть разницу между старой и новой версией файла
Терминал#
Вкладка «Terminal» — это удалённый терминал, подключённый к вашему компьютеру. Можно запускать команды прямо с телефона.
Уведомления#
HAPI умеет присылать push-уведомления на телефон:
- При первом запуске приложение попросит разрешение на уведомления — нажмите «Разрешить»
- Теперь вы будете получать уведомления, когда:
- AI-агент просит одобрить действие
- AI-агент закончил работу и ждёт ввода
💡 Если push-уведомления не работают (например, в Китае, где заблокирован Firebase), используйте Telegram-бот как альтернативу.
Работа без интернета#
PWA умеет работать офлайн (без интернета) в ограниченном режиме:
- Показывает кэшированный список сессий
- Показывает ранее загруженные сообщения
- Действия, сделанные офлайн, отправятся когда интернет вернётся
Несколько устройств#
HAPI можно установить на несколько устройств одновременно:
- Телефон, планшет, второй компьютер — все подключаются к одному hub
- Используйте один и тот же access token
- Сессии синхронизируются между устройствами
Удаление приложения#
Если нужно удалить HAPI:
- Android: долгое нажатие на иконку → «Удалить»
- iPhone: долгое нажатие на иконку → «Удалить приложение»
- Компьютер: откройте HAPI → меню (три точки) → «Удалить HAPI»
Итоги урока#
- PWA — это веб-приложение, которое устанавливается как обычная программа
- На Android устанавливается через Chrome, на iPhone — только через Safari
- Интерфейс включает: список сессий, чат, одобрение запросов, просмотр файлов, терминал
- Push-уведомления сообщают, когда AI-агенту нужно ваше внимание
- Можно установить на несколько устройств одновременно
В следующем уроке мы научимся работать с разными AI-агентами через HAPI.