Инструкции по подключению VPN для Android, iPhone и ПК

Задача

Человеку без технической подготовки, который получил VPN-подписку, нужна понятная инструкция «что нажать» на его устройстве. Без неё он пишет в поддержку с одними и теми же вопросами: где взять приложение, как добавить подписку, как включить VPN. Каждый такой вопрос — нагрузка на человека, который поддерживает сервис.

Устройства у пользователей разные: телефоны на Android, iPhone и iPad, компьютеры на Windows, macOS и Linux. Для каждой платформы свой клиент и свои пункты меню. Инструкция должна быть отдельной для каждой, короткой и доступной там, где человек уже находится, — в чате с ботом сервиса в Telegram.

Решение

Набор из пяти статических HTML-страниц, по одной на платформу. Страницы рассчитаны на открытие внутри Telegram Mini App из бота сервиса. Что реализовано по README:

• Пять самостоятельных страниц: Android, iPhone и iPad, Windows, macOS, Linux; в каждой шаги, подсказки и блок вопросов.
• Путь от установки приложения до включения VPN и раздел «Не работает? Проверьте».
• Ссылка на бота сервиса в начале и в конце каждой страницы.
• Кнопка «Готово, закрыть»: страница закрывается и возвращает человека в чат.
• Оформление под тему Telegram: цвета берутся из переменных клиента.
• Публикация на GitHub Pages и открытый репозиторий на GitHub.

Как это устроено

Статические страницы без сборки

Каждая страница — один HTML-файл: стили и скрипты встроены, сборщика, Docker и переменных окружения нет. Такие файлы можно открыть двойным щелчком или отдать любым статическим хостингом. Для локального просмотра достаточно простого сервера. Единственная внешняя зависимость — скрипт Telegram Web Apps, который подключается с telegram.org.

Telegram Mini App: страница внутри чата

Mini App (в исходнике — WebApp) — веб-страница, которую Telegram показывает внутри самого мессенджера. При загрузке страница вызывает Telegram.WebApp.ready() и expand(): сообщает Telegram, что готова, и раскрывается на весь экран. Кнопка «Готово, закрыть» вызывает Telegram.WebApp.close() и возвращает человека в чат. Telegram требует для Mini App адрес по HTTPS, поэтому страницы размещены на GitHub Pages. Вне Telegram объект Telegram.WebApp недоступен, и кнопка закрытия там не работает: это ожидаемо.

Тема Telegram и вёрстка под телефон

Цвета страниц берутся из CSS-переменных, которые задаёт клиент Telegram, поэтому в тёмной и светлой темах инструкция выглядит частью мессенджера. Вёрстка рассчитана на экран телефона: по критериям приёмки она должна читаться на телефоне, а цвета следовать теме.

Шаги под конкретные клиенты

Для Android, Windows и Linux инструкция разбирает клиент NekoBox, для macOS — V2Box; iPhone и iPad вынесены на отдельную страницу. У каждой страницы один сценарий: поставить приложение, добавить подписку, включить VPN, проверить, если не работает. Название файла говорит платформу: android.html, ios.html, windows.html, macos.html, linux.html.

Публикация и проверка страниц

Сборка не нужна: файлы размещают на любом статическом хостинге по HTTPS и указывают адреса страниц в боте. Локально страницу можно открыть в браузере или поднять простой сервер командой python -m http.server. Критерии приёмки в README проверяют пять вещей: страницы открываются без ошибок в консоли, внутри Telegram раскрываются на весь экран, ссылка на бота ведёт в Telegram, вёрстка читается на телефоне, а шаги совпадают с интерфейсом клиента. Последний пункт проверяется вручную на устройстве.

Результат

• Пять платформ закрыты пятью страницами, каждая независима от остальных.
• Страницы рассчитаны на открытие из бота внутри Telegram, без перехода в браузер.
• Проект не требует сборки, Docker и переменных окружения: правка страницы — это правка одного HTML-файла.
• Репозиторий открыт, живая версия опубликована на GitHub Pages.

Технологии: что и зачем

• HTML5, CSS, JavaScript — страницы без сборки и зависимостей; стили и скрипты встроены в каждый файл.
• Telegram Web Apps API — раскрытие на весь экран, кнопка закрытия и цвета темы Telegram.
• GitHub Pages — статический хостинг по HTTPS, которого требует Telegram Mini App.

Статус

В продакшене, открытый собственный проект. Явных версий нет: последняя запись журнала — 28 июля 2026 года, когда файлы обновили через веб-интерфейс GitHub. Первая загрузка — 21 января 2026 года, а 23 января страницы Android, iOS, Linux и macOS расширили и переработали.

Известные ограничения по README: инструкции привязаны к названиям пунктов меню клиентов и устаревают при их обновлении; адрес бота зашит в каждый из пяти файлов, общего шаблона нет; автоматических тестов и проверки ссылок нет. В страницы также добавлена защита от копирования (запрет выделения, контекстного меню и горячих клавиш инспектора): README называет её декоративной, она ухудшает доступность и не защищает содержимое, и её стоит убрать или оставить осознанно.