Как создать веб-приложение, удобное на телефоне

Веб-приложение, удобное для телефона, — это сайт, который работает как приложение на телефоне: он подстраивается под узкий экран, имеет крупные элементы для касания, быстро загружается по мобильному интернету и может быть добавлен на главный экран как прогрессивное веб-приложение (PWA). Для большинства новых приложений это практичная первая версия: один код, одна ссылка, без проверки в магазине. У неё есть реальные ограничения, особенно в части уведомлений на iPhone и доступа к устройству, и этот гид честно объясняет, когда нужно нативное приложение.

Три способа быть «на мобильном»

PWA — это адаптивное веб-приложение с парой дополнительных возможностей, поэтому не нужно выбирать между первыми двумя вариантами. Сначала сделайте адаптивную версию, затем сделайте её устанавливаемой. Подробнее о сравнении см. нативные приложения и прогрессивные веб-приложения.

Что веб-приложения могут и чего не могут на телефонах

Браузеры умеют больше, чем многие думают:

• Камера и загрузка фото через стандартные поля для файлов.
• Геолокация с разрешения пользователя.
• Установка на главный экран с иконкой и запуском на весь экран.
• Работа без сети за счёт кэширования страниц и данных через service worker (фоновый скрипт, который браузер выполняет для вашего сайта).
• Push-уведомления — с оговоркой для iPhone. Команда WebKit от Apple сообщает, что web push появился в iOS и iPadOS 16.4 для веб-приложений, добавленных на главный экран. Пользователь сначала должен установить приложение, затем разрешить уведомления.

Где нативные приложения всё ещё сильнее:

• Глубокие возможности устройства, например фоновая геолокация, Bluetooth-аксессуары, данные о здоровье и виджеты на главном экране: в браузере поддержка ограничена или различается по платформам.
• Поиск в магазине приложений. Если люди будут искать вас в магазине, нужно быть там.
• Тяжёлая работа без сети, например синхронизация больших объёмов данных в фоне.
• Графика, критичная к производительности, например требовательные игры.

Если ни одна из этих задач не является для вашего приложения ключевой, веб-приложение, скорее всего, вам подойдёт.

Проектирование в первую очередь для телефонов

Сначала проектируйте версию для телефона, а потом расширяйте её для больших экранов; обратный путь обычно даёт тесный интерфейс на телефоне.

Вёрстка

• Одна колонка на маленьких экранах. Боковые панели превращаются в нижнюю панель или меню.
• Никакой горизонтальной прокрутки. Широкие таблицы становятся карточками или прокручиваются внутри своего контейнера.
• Читаемый текст без увеличения — основной текст около 16px.

Касания

• Крупные элементы для нажатия. Минимум около 44 на 44 пикселя — распространённое правило. Оставляйте между ними место.
• Главные действия в зоне большого пальца, ближе к низу экрана на высоких телефонах.
• Никаких функций, работающих только при наведении. Подсказки и меню, которые появляются при наведении курсора, на сенсорных экранах не существуют.
• Правильная клавиатура. Поля email должны открывать клавиатуру для email, поля телефона — цифровую клавиатуру. Указывайте правильные типы полей ввода.

Скорость

• Небольшие изображения разумного размера, загружаемые по мере появления в области просмотра.
• Меньше тяжёлых библиотек. Каждая добавляет время загрузки по мобильному трафику.
• Скелетоны экрана или понятные состояния загрузки, чтобы приложение никогда не выглядело зависшим.

Безопасные зоны и адресная строка

На современных телефонах содержимое может оказаться под вырезом или индикатором «домой», особенно в полноэкранном установленном приложении. Добавляйте отступы для безопасных зон. Также следите за макетами на всю высоту, которые «прыгают», когда адресная строка браузера появляется и исчезает.

Делаем установку возможной (PWA)

Чтобы веб-приложение можно было установить, нужно:

1. Манифест веб-приложения — небольшой файл с названием приложения, коротким названием, иконками, цветом темы и режимом открытия (обычно полноэкранный «standalone»).
2. Иконки нужных платформам размеров, включая подходящую для устройств Apple.
3. HTTPS, который у любого правильно размещённого приложения уже есть.
4. Service worker, если нужна работа без сети или push-уведомления.

После этого расскажите пользователям, как установить приложение. Браузеры Android обычно показывают предложение установки или пункт в меню; на iPhone нужно нажать кнопку «Поделиться», затем «На экран «Домой»». Короткая заметка «Установите приложение» с этими шагами сильно помогает.

Работа без сети — самая сложная часть PWA. Кэшировать страницы приложения, чтобы оно открывалось без соединения, несложно. А вот позволять людям менять данные офлайн и синхронизировать их потом — серьёзная задача; добавляйте её, только если пользователям это действительно нужно.

Первый промпт, который работает

Сделай веб-приложение для нашей команды уборки, чтобы видеть сегодняшние заказы и отмечать их выполненными. Сначала проектируй для телефонов: одна колонка, крупные кнопки, главная кнопка действия зафиксирована ближе к низу экрана, никаких элементов только для наведения, никакой горизонтальной прокрутки и правильные клавиатуры для полей телефона и email. Каждый заказ показывает адрес (нажатие открывает карты), телефон клиента (нажатие звонит), чеклист и кнопку «Отметить выполненным», которая может добавить фото. Менеджеры входят с ноутбука, чтобы назначать заказы; на широком экране показывай таблицу вместо карточек. Сделай устанавливаемое PWA с манифестом, иконками и режимом standalone, и кэшируй оболочку приложения, чтобы оно открывалось без сигнала. Данные храни в базе данных.

Этапы создания

1. Сначала сделайте мобильную вёрстку на тестовых данных и проверьте её в предпросмотре размера телефона.
2. Протестируйте на настоящих телефонах — хотя бы на iPhone и на Android, если у пользователей есть оба. Эмуляторы пропускают такие вещи, как экранная клавиатура, перекрывающая поля.
3. Пройдите основное действие одним пальцем. Если что-то требует двух рук или увеличения, исправьте.
4. Добавьте манифест и иконки, затем установите приложение на обеих платформах и проверьте иконку, название и заставку.
5. Решите вопрос с работой без сети. Начните с «открывается без сигнала и показывает понятное сообщение»; редактирование офлайн добавляйте, только если оно нужно.
6. Проверьте скорость на медленном соединении. Инструменты разработчика в браузере умеют его имитировать.
7. Уведомления добавляйте в последнюю очередь, если вообще — и предусмотрите запасной вариант по email для тех, кто не установил приложение.

Частые ошибки

• Проектировать только на большом мониторе. Проверяйте каждый экран при ширине телефона по ходу работы.
• Таблицы, которые выходят за экран. На маленьких экранах превращайте строки в карточки.
• Маленькие элементы для нажатия и ссылки, стоящие слишком близко.
• Формы, которые борются с клавиатурой: неправильные типы полей, поля, скрытые клавиатурой, отсутствие перехода «далее».
• Считать, что push на iPhone работает во вкладке браузера. Для этого приложение должно быть установлено на главный экран.
• Обещать приложение в App Store, которое вы не можете выпустить. Если магазин важен, планируйте его отдельно.
• Обернуть сайт и назвать его приложением. Правила App Review Apple требуют приложений, которые выходят за рамки переупакованного сайта; тонкая обёртка рискует быть отклонённой.

Когда нужно нативное приложение

Переходите на нативное приложение (или планируйте нативную версию после веб-приложения), когда:

• Присутствие в магазине — это то, как клиенты будут вас находить.
• Вы опираетесь на фоновую геолокацию, Bluetooth, данные о здоровье, виджеты или другие функции устройства, которые браузеры надёжно не дают.
• Приложение должно полностью работать без сети долгое время.
• Ваши пользователи этого ожидают — некоторые аудитории просто не будут пользоваться ничем, чего нет в магазине.

Публикация в магазинах имеет свои расходы и этапы. На сентябрь 2026 года программа разработчика Apple стоит 99 US$ в год, аккаунт Google Play — разовые 25 US$, по данным их собственных сайтов, и каждый релиз проходит проверку. Многие команды начинают с адаптивного веб-приложения, чтобы проверить, что людям нужен продукт, а потом вкладываются в нативную версию. Как создать приложение с помощью ИИ описывает этот первый этап от начала до конца.

Как это сделать в Mythex

Mythex создаёт веб-приложения: вы описываете приложение в чате и проверяете его в живом предпросмотре на компьютере и в рамке размера телефона, которую можно изменять. В документации есть промпт для мобильной адаптивности для исправления вёрстки на маленьких экранах. Манифест PWA и иконки можно запросить как любую другую функцию, а затем опубликовать приложение по публичной ссылке, которая работает на любом телефоне. На тарифе Pro Mythex также может обернуть приложение в Android- и iPhone-приложение и отправить его во внутреннее тестирование Google Play и в TestFlight. Для старта посмотрите ИИ-конструктор веб-приложений или откройте шаблоны приложений. Для примера в работе прочитайте как создать приложение-трекер привычек.

Вопросы