Веб-приложение: что это, чем отличается от обычного приложения и примеры
Что такое веб-приложение простыми словами, чем оно отличается от сайта и приложения из магазина, при чём тут PWA, примеры и как открыть его на телефоне.
Веб-приложение — это программа, которая работает в браузере и загружается из интернета, а не устанавливается из магазина приложений. Почта в браузере, онлайн-документы, карты, интернет-банк — всё это веб-приложения. Ниже объясняем, чем они отличаются от обычных сайтов и от «настоящих» приложений, и показываем примеры.
Что такое веб-приложение простыми словами
Обычный сайт в основном показывает информацию: статьи, новости, карточки товаров. Веб-приложение помогает что-то делать: писать текст, считать бюджет, редактировать фото, переводить деньги, играть. Граница размыта, но ориентир простой: если со страницей вы работаете, а не только читаете её, это веб-приложение.
Код веб-приложения хранится на сервере и открывается по ссылке. Поэтому его не нужно скачивать и обновлять вручную: разработчик выкладывает новую версию, и при следующем открытии у вас уже она. Работает такое приложение на любом устройстве с современным браузером — на телефоне, планшете и компьютере.
Мобильное веб-приложение
Мобильным веб-приложением обычно называют веб-приложение, удобное для пальцев и маленького экрана: крупные кнопки, нижнее меню, работа в портретной ориентации. Его можно открыть в браузере телефона или добавить значком на экран «Домой» — тогда оно запускается почти как обычное приложение. Как это сделать, мы подробно описали в инструкции как добавить сайт на экран «Домой».
Где здесь PWA
PWA (Progressive Web App, прогрессивное веб-приложение) — это веб-приложение, которое «умеет» вести себя как установленная программа. Для этого у него есть файл-описание (manifest.json или manifest.webmanifest) с названием, иконками и режимом окна, а часто ещё и service worker — фоновый скрипт, который кэширует файлы и может обеспечивать работу без интернета и push-уведомления.
PWA можно установить из браузера: оно получает свой значок, открывается в отдельном окне без адресной строки, на Android и компьютере появляется в списке приложений. Подробнее — в статье что такое PWA и в пошаговой инструкции как установить PWA.
Чем отличается веб-приложение от обычного приложения
«Обычным» или нативным называют приложение, написанное под конкретную платформу и установленное из App Store, Google Play, RuStore или другого магазина. Главные отличия — в способе установки, обновлениях и доступе к возможностям устройства.
| Веб-приложение в браузере | PWA (установленное веб-приложение) | Нативное приложение | |
|---|---|---|---|
| Где взять | Открыть ссылку в браузере | Установить из браузера или добавить на экран «Домой» | Скачать из магазина приложений |
| Значок на экране | Нет, только вкладка или закладка | Да | Да |
| Отдельное окно | Нет | Да, без адресной строки | Да |
| Обновления | Автоматически при открытии | Автоматически, без магазина | Через магазин, нужно скачивать |
| Место на устройстве | Почти не занимает | Обычно мало: кэш и данные | От десятков мегабайт до гигабайт |
| Работа без интернета | Как правило, нет | Если разработчик это сделал | Часто да |
| Push-уведомления | Зависит от браузера | Android и компьютер — да; iPhone — с iOS 16.4 для приложений на экране «Домой» | Да |
| Доступ к функциям устройства | Ограничен возможностями браузера | Ограничен возможностями браузера | Максимальный |
| Проверка магазином | Нет | Нет (кроме публикации в магазинах) | Да |
Веб-приложение — то, что работает в браузере. PWA — веб-приложение, которое можно установить и запускать как обычную программу. Нативное приложение — программа из магазина под конкретную ОС.
Плюсы и минусы веб-приложений
Плюсы
- Не нужен магазин приложений. Достаточно ссылки — это важно, когда приложения нет в вашем магазине или оно оттуда удалено.
- Одна версия для всех устройств. Один и тот же сервис открывается на iPhone, Android, Windows и Mac.
- Всегда свежая версия без ручных обновлений.
- Мало места на устройстве — нет установочного пакета на сотни мегабайт.
- Безопасность браузера. Веб-приложение работает в «песочнице» и получает доступ к камере, геолокации или уведомлениям только после вашего разрешения.
Минусы
- Без интернета многие веб-приложения не работают — офлайн-режим нужно специально делать — перед поездкой проверьте приложение в авиарежиме.
- Часть функций устройства недоступна или работает не во всех браузерах — особенно на iPhone.
- Если очистить данные браузера, можно потерять вход в аккаунт и локальные данные.
- Нет единого магазина, поэтому найти хорошее веб-приложение сложнее — для этого мы и собираем каталог PWA.
Примеры веб-приложений
Веб-приложения бывают какими угодно — от калькулятора до полноценного офисного пакета. Самые распространённые типы:
- Офис и продуктивность: онлайн-документы и таблицы, заметки, списки задач, календари.
- Общение: веб-версии почты и мессенджеров.
- Финансы: интернет-банки и мобильные веб-версии банков, учёт расходов. Для российских банков на iPhone это особенно актуально — см. приложения банков на iPhone.
- Игры: браузерные игры, которые запускаются без установки, в том числе каталоги вроде Яндекс Игр.
- Карты и транспорт: расписания, онлайн-табло, навигация.
- Творчество: редакторы фото, графики, музыкальные инструменты в браузере.
Несколько веб-приложений из каталога
WalletLens — Net Worth & Portfolio Tracker
Free net worth tracker — manage all your investments in one place: crypto, US stocks, gold, silver, cash and FX.
Zoned — Endurance Training
Science-based endurance training: structured workouts, training plans and calculators built on a 6-zone system.
Как открыть веб-приложение на телефоне
Откройте ссылку в браузере
На iPhone лучше всего использовать Safari, на Android — Chrome, Яндекс Браузер или Samsung Internet.
Войдите в аккаунт, если он нужен
Данные входа сохраняются в браузере, поэтому повторно вводить их обычно не придётся.
Добавьте значок на экран «Домой»
На iPhone: «Поделиться» → «На экран „Домой“». На Android: меню браузера → пункт установки или добавления на главный экран. Подробно — в инструкции по установке PWA.
Запускайте со значка
Теперь веб-приложение открывается одним касанием, как обычное.
Веб-приложение не работает: что проверить
- Проверьте интернет: большинству веб-приложений нужна сеть.
- Обновите страницу или закройте и снова откройте приложение со значка.
- Обновите браузер и систему — новые возможности PWA приходят именно с ними.
- Если приложение «застряло» на старой версии, очистите данные сайта в настройках браузера (учтите: придётся снова войти в аккаунт).
- Удалите значок и добавьте его заново.
Если вы разработчик и хотите понять, почему ваше веб-приложение не устанавливается, проверьте его бесплатным PWA-чекером или посмотрите все инструменты для PWA.