Программа внутри программы: что происходит, когда вы открываете веб-приложение на Айфоне

С появлением санкций и блокировкой банковских приложений российские владельцы айфонов начали узнавать много нового. Они изучили ранее никому неизвестные способы установки программ в обход App Store и даже научились пользоваться веб-приложениями. Только вот мало кто разобрался, что это вообще такое — веб-приложение. Почему оно похоже на мобильную программу, но работает в браузере. При этом у нее нет привычных элементов управления как в Safari, а еще адресной строки и закладок. И вообще, из чего сделаны веб-приложения и почему их путают с мини-приложениями?

Веб-приложение и сайт: в чем разница?

❗️ПОДПИСЫВАЙСЯ НА НАШ КАНАЛ В ДЗЕНЕ И ЧИТАЙ КРУТЫЕ СТАТЬИ БЕСПЛАТНО

Когда вы открываете мессенджер, переходите в новостной канал AppleInsider.ru и нажимаете на ссылку с анонсом, то на экране появляется страница с полным текстом новости. При этом вы все еще находитесь в пределах того же мессенджера, хотя и понимаете, что перешли по ссылке и должны были попасть в браузер и на наш сайт. На самом деле, так и есть, вы попали в браузер, только не совсем тот, который установлен у вас в системе и обычно используется для открытия сайтов. В таких случаях работает встроенный браузер.

Что такое встроенный браузер iOS и зачем он нужен

Во многих приложениях на iPhone есть встроенный браузер, с помощью которого можно быстро открыть сайт и любую страницу в интернете, не перенаправляя запросы пользователя в отдельный браузер. Со стороны это выглядит логично: вы читаете анонс новости в соцсети, нажимаете на ссылку и сразу попадаете на страницу с основным текстом, не выпадая из приложения.

Наш сайт в Telegram тоже открывается во внутреннем браузере

Это удобно и для пользоватля, и для разработчиков. Пользователь остается внутри экосистемы, не отвлекается и не теряет контекст. И это не какая-то уникальная фишка iOS, а в целом универсальный способ, который аналогично работает на устройствах с Android на борту. С одним лишь отличием: в айфонах используется только один движок WebKit, который разработала Apple. Так что тут не самодельный браузер каждого отдельного приложения, а все тот же Safari, использующийся в системе по умолчанию.

❗️ПОДПИСЫВАЙСЯ НА ТЕЛЕГРАМ-КАНАЛ СУНДУК АЛИБАБЫ. ТАМ КАЖДЫЙ ДЕНЬ ВЫХОДЯТ ПОДБОРКИ САМЫХ ЛУЧШИХ ТОВАРОВ С АЛИЭКСПРЕСС

По сути, встроенный браузер это просто «голый» Safari, который лишен всего или почти всего интерфейса. Там нет стрелок «назад» и «вперед», а еще закладок, паролей, истории и остальной обвязки, которую мы привыкли видеть и использовать в полноценных браузерах. С одной стороны, это неудобно, ведь серфить по интернету с такими ограничениями практически нереально. Но и не надо: встроенный браузер придумали для другого. С его помощью удобно запускать веб-приложения. А еще мини-приложения. И, да, это не совсем одно и то же.

Что такое веб-приложения на iPhone

С технической точки зрения веб-приложение это обычная страница в интернете. Та же самая, которая открывается в Safari, Chrome или любом другом браузере. Все потому, что это смесь HTML, CSS и JavaScript: то есть, стандартных технологий создания сайтов. Никакого особого кода для них не существует, и, если взять ссылку на такое мини-приложение и открыть ее, например, на компьютере, страница спокойно загрузится и будет работать точно также, как и на телефоне.

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

Перейдите на сайт AppleInsider.ru с телефона
Нажмите три точки в нижнем правом углу
Выберите там «Поделиться»
Затем укажите «Добавить на экран Домой»
При сохранении активируйте галочку «Открывать как веб-приложение»

Теперь вы можете читать статьи и новости, не открывая браузер и не вводя адрес: просто нажимаете на ярлык на рабочем столе и сразу попадаете на главную страницу сайта. Аналогичным образом работают и другие веб-приложения. Например, у банков. Только здесь страничка обладает собственными органами управления: кнопками, виджетами и другими элементами, которые имитируют интерфейс мобильного приложения.

Слева мобильное приложение, справа — веб. Или наоборот… В общем, на вид разницы между ними вообще никакой нет

И, если открыть такую страничку в обычном браузере, то пользоваться ею будет не так удобно, потому что вам будeт мешать адресная строка и другие элементы. Вот здесь и кроется практическое отличие веб-приложения от обычного сайта, а также полноценного браузера от встроенного. А именно, при открытии сайта в формате веб-приложения ничего круто не меняется, просто вместо полноценного Safari на айфоне открывается его упрощенный вариант в виде голого движка WebKit.

А дальше уже забота создателей этого сайта: они могут адаптировать его и сделать в виде приложения или оставить как есть, голым сайтом. Адаптированная страница веб-приложения выглядит немного иначе, чем привычный сайт. Здесь нет адресной строки, кнопок «назад» и «вперед», вкладок и других браузерных элементов. Интерфейс тут намеренно упрощен, чтобы не мешать работе основных функций, встроенных прямо в страницу.

Чем веб-приложение отличается от мини-приложения

Еще в мире существуют мини-аппы или мини-приложения. Если не вдаваться в подробности, то это то же веб-приложение. Оно написано на HTML и CSS, а еще имеет свой интерфейс и адаптировано для работы во встроенном браузере. Но, мы будет не правы, если остановимся на этом утверждении и не объясним реальную разницу между Mini App и WebApp (да, их еще и так называют).

Как и веб-приложение, мини-приложение может работать в браузере, но чаще всего используется именно в мессенджерах. А все потому, что Mini App имеет дополнительную особенность в виде API-связки с Telegram или тем же российским MAX. По этому каналу мессенджер и мини-программа могут общаться и передавать некоторые данные о пользователе:

кто открыл приложение
имя и аватар
иногда номер телефона
некоторые данные профиля или подписок

И, наоборот, мини-приложение тоже может отправить какие-то данные обратно в мессенджер: например, какую кнопку нажали, какую форму заполнили или действие совершили. Вот и вся магия. Так что это не отдельное приложение, а всего лишь сайт с дополнительным доступом к данным мессенджера.

Вот так выглядит личный кабинет в банке, который открыли через десктоп

Вот, смотрите: если открыть личный кабинет банка на сайте, то он будет выглядеть как стандартная страница с привычными для банка функциями. А можно открыть его же в виде веб-приложения, как мы показывали выше. Но есть и другой способ — запустить Альфа-Банк в виде мини-приложения через MAX. Для этого:

Скачайте и зарегистрируйтесь в MAX
Найдите в поиске «Альфа-Банк» и запустите бота
В нижнем правом углу нажмите кнопку запуска встроенного приложения
Подтвердите передачу номера
Пройдите стандартную авторизацию в банке

Заходим в бота Альфы, отдаем ему свой номер и получаем личный кабинет прямо в MAX

С точки зрения пользователя это выглядит как приложение, ведь здесь нет адресной строки, вкладок и другого браузерного интерфейса. Все открывается быстро, в одном окне, прямо внутри мессенджера. Но по сути это все равно встроенный браузер iOS, просто аккуратно спрятанный. Он открывает URL, который лежит где-то на сервере и выдается ботом под видом красивой кнопки.

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

❗️ПОДПИСЫВАЙСЯ НА ТЕЛЕГРАМ-КАНАЛ AppleInsider.ru. ТАМ КУДА БОЛЬШЕ КОНТЕНТА, ЧЕМ НА САЙТЕ