Open WebUI как приложение на компьютере и телефоне

Поможем добавить Open WebUI как приложение на компьютер или телефон, выбрать подходящий адрес сервера и разобраться с входом, уведомлениями и доступом по сети.

После урока вы сможете

  • Понять разницу между PWA и Open WebUI Desktop
  • Добавить доступный сервер Open WebUI как приложение на своём устройстве
  • Проверить вход и понять ограничения сетевого доступа и уведомлений

Проверяемый результат: Установленный значок открывает доступный с устройства сервер Open WebUI. Понятно, почему телефону нужен отдельный доступный адрес и какие данные остаются на сервере.

Когда сервер Open WebUI уже запущен и вы прошли первый вход, чат можно открывать отдельным значком на компьютере или телефоне. Так его проще найти среди других приложений, не разыскивая вкладку в браузере.

Для этого не нужно скачивать отдельный установщик. Open WebUI поддерживает Progressive Web App (PWA), установку веб-приложения прямо из браузера. В этом уроке добавим его на своё устройство и проверим, что открывается нужный сервер. Если вам удобнее обычная вкладка, можно продолжать пользоваться ею.

Что меняется при установке через браузер

После установки у Open WebUI появляется своё окно без обычной адресной строки браузера. Внутри открывается тот же сервер, которым вы уже пользовались. Новый контейнер Docker, копия базы данных или сервер моделей при этом не создаются.

У Open WebUI Desktop другая роль: отдельная программа умеет управлять собственной локальной установкой или подключаться к существующей. PWA открывает готовый экземпляр через браузер.

В нашей установке через Docker Compose учётные записи и сохранённые чаты находятся в постоянном томе. Если войти в тот же аккаунт на том же сервере через установленное приложение, сохранённые диалоги будут доступны и там.

Какой адрес подойдёт для компьютера и телефона

Перед установкой проверим, по какому адресу устройство обращается к серверу. В руководстве MDN по установке PWA HTTPS или локальный адрес localhost / 127.0.0.1 указаны как условие установки через манифест приложения. Некоторые браузеры умеют также сохранять обычные сайты в виде приложения, поэтому наличие отдельного окна ещё не подтверждает выполнение требований PWA.

В уроке про Docker Compose мы опубликовали порт как 127.0.0.1:3000:8080. На этом же компьютере используем адрес http://127.0.0.1:3000 и в браузере, и при установке веб-приложения.

На телефоне 127.0.0.1 ведёт на сам телефон, а не на компьютер с контейнером. Это свойство локального адреса loopback. Просто подставить вместо него сетевой IP компьютера тоже недостаточно: порт в нашей конфигурации привязан к 127.0.0.1, а обычный HTTP в локальной сети не заменяет HTTPS для PWA.

Для телефона сначала понадобится доступный с него HTTPS-адрес того же сервера. Это может быть и подключение через частную сеть или VPN: публиковать сервис на весь интернет необязательно. Сетевой доступ настраивается отдельно. Если его ещё нет, добавим приложение на компьютере, а к мобильной части вернёмся после подготовки адреса.

Установим приложение на своём устройстве

Дальше понадобится только раздел для вашего устройства и браузера. Названия пунктов меню могут отличаться в зависимости от языка системы и версии браузера.

Компьютер: Google Chrome и Microsoft Edge

На Windows, macOS и Linux начнём с Chrome или Edge:

  1. Откроем адрес сервера, например http://127.0.0.1:3000 на том же компьютере, и дождёмся загрузки интерфейса.
  2. Найдём значок установки в адресной строке. Он описан в справке Chrome и руководстве Edge, где называется App available. Нажмём его и подтвердим установку.
  3. Если значка нет, в Chrome откроем меню с тремя точками → Cast, save, and share → Install page as app. Это путь к установке страницы как приложения.

После подтверждения Open WebUI откроется в отдельном окне. Управлять установленными приложениями можно на страницах chrome://apps или edge://apps. Для быстрого запуска значок можно закрепить на панели задач.

Компьютер Mac: Safari

В Safari начиная с macOS Sonoma 14 можно добавить сайт в Dock:

  1. Откроем свой Open WebUI в Safari.
  2. Выберем «Файл» → «Добавить в Dock». То же действие доступно через кнопку «Поделиться» на панели инструментов.
  3. Проверим название приложения и нажмём «Добавить».

Приложение появится в панели Dock и сохранится в папке Applications вашего домашнего каталога. У веб-приложения в macOS своё хранилище файлов cookie. При первом запуске может потребоваться повторный вход; заранее рассчитывать на общую сессию с Safari не будем.

Телефон или планшет на Android: Chrome

Сначала откроем HTTPS-адрес сервера в Chrome на телефоне. Если для доступа нужен VPN, подключим его. Когда страница загрузится, перейдём к установке приложения:

  1. Нажмём кнопку меню с тремя точками.
  2. Найдём раздел Install and create shortcut → Install. В инструкции Open WebUI также приведены варианты «Установить приложение» (Install app) и «Добавить на главный экран» (Add to Home Screen); название зависит от версии браузера.
  3. Подтвердим установку в появившемся окне.

iPhone и iPad: Safari

Воспользуемся Safari: этот путь описан в инструкции Open WebUI для iPhone и iPad. Расположение кнопок уточним по руководству пользователя iPhone:

  1. Откроем рабочий HTTPS-адрес сервера в Safari.
  2. Нажмём «Поделиться», значок квадрата со стрелкой вверх. В зависимости от раскладки панели кнопка может находиться в меню страницы.
  3. Выберем «На экран „Домой“». Если пункта нет, найдём его внизу списка через «Редактировать действия».
  4. Включим «Открыть как веб-приложение», если такой переключатель показан, и нажмём «Добавить».

Проверим первый вход и уведомления

Запустим появившийся значок Open WebUI. Если приложение попросит авторизоваться, войдём в свою учётную запись. Проверим, что открылся нужный сервер и видны сохранённые в этом аккаунте чаты, если они уже есть. Если модели ещё не подключены, пустой список сам по себе не говорит об ошибке PWA: источники ответов настраиваются на сервере отдельно.

Если нужны уведомления о готовом ответе, в настройках Open WebUI есть Settings → Notifications → Browser Notifications. Они работают только пока приложение открыто. Отдельного push-сервиса у Open WebUI нет, поэтому после полного закрытия окна рассчитывать на оповещение нельзя.

Если приложение не устанавливается или не открывает чат

Если кнопки установки нет, проверим браузер и адрес страницы. Предложение установки зависит от браузера и платформы; для сетевого адреса также проверим HTTPS без предупреждений о сертификате. Отключать проверку сертификатов ради кнопки установки не будем. Пока вопрос не решён, сервисом можно пользоваться в обычной вкладке.

Если значок запускается, но чат не загружается, откроем тот же адрес в браузере. Если не работает и там, проверим сервер и соединение с ним: для нашего Compose это запущенный контейнер, для телефона также доступ по сети и VPN, если он нужен.

Отсутствие интернета и отсутствие связи с сервером здесь означают разное. Уже настроенный локальный сервер с локальной моделью может работать без выхода в интернет. Телефону всё равно нужно соединение с этим сервером, а при использовании облачной модели интернет нужен на стороне сервера. Установка PWA сама по себе не добавляет автономную генерацию ответов.

Если приложение больше не нужно

Удаление PWA с устройства не удаляет сервер Open WebUI и сохранённые на нём чаты. В Chrome и Edge на компьютере приложение можно удалить через меню окна или страницы chrome://apps и edge://apps. В Chrome отдельно предлагается удалить данные сайта из браузера: после этого может понадобиться повторный вход. Локальный кеш и несохранённые черновики не заменяют сохранение данных на сервере.

Для Safari на Mac Apple описывает удаление приложения из папки Applications домашнего каталога в Корзину. На Android воспользуемся настройками системы: Apps → выбранное приложение → Uninstall.

Материалы урока

Отметить прохождение

Отметьте урок после того, как получили проверяемый результат из практической части.