{"id":14274,"url":"\/distributions\/14274\/click?bit=1&hash=fadd1ae2f2e07e0dfe00a9cff0f1f56eecf48fb8ab0df0b0bfa4004b70b3f9e6","title":"\u0427\u0435\u043c \u043c\u0443\u0440\u0430\u0432\u044c\u0438\u043d\u044b\u0435 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"6fbf3884-3bcf-55d2-978b-295966d75ee2"}

PWA vs мобильный веб: чем отличаются и что выбрать

Мы уже писали про PWA вот тут и тут. В этой статье рассмотрим эту технологию ещё с одной стороны — сравним его с мобильным веб-сайтом.

Вы в блоге Surf, с 2011 года мы разрабатываем мобильные и веб-решения для бизнеса

О чём в этой статье:

PWA и мобильный веб: а есть ли разница

Веб-приложение — это программа, которая отвечает определённому запросу пользователя. Например, сервис поиска билетов: на сайте пользователь вводит данные, в это время веб-сервис обращается к компаниям, которые продают билеты. В результате пользователю отображаются подобранные по его запросам варианты.

Мобильная версия сайта (мобильный веб) — версия сайта, адаптированная для смартфонов, открывается с помощью мобильного браузера.

PWA (Progressive Web App) — один из способов реализации мобильного веба, технология, с помощью которой сайт преобразуется в веб-приложение визуально и функционально. Мы уже писали об этой технологии подробнее в этой статье.

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

6 отличий PWA от мобильной версии сайта

  • Скорость загрузки. У PWA она существенно выше, чем у мобильной версии сайта. Это связано с тем, что все необходимые данные загружаются в смартфон и далее не зависят от скорости интернета. Новые фичи и обновления добавляются командой, которая поддерживает приложение.
  • Независимость от браузеров. PWA работает внутри системы и всегда выглядит одинаково, независимо от того, какие браузеры установлены у пользователя.
  • Доступность в офлайне. Сайт не может работать без интернета (мобильного или Wi-Fi), в отличие от PWA. При подключении к интернету, прогрессивные веб-приложения загружают и сохраняют необходимые файлы и дальше могут работать без доступа к сети.
  • UI\UX. В разработке PWA есть все инструменты для реализации интерфейса, довольно близкого к нативному.
  • Возможность добавления иконки на экран смартфона. PWA предоставляет такую возможность, облегчая поиск сервиса. В мобильную версию сайта пользователь может зайти через браузер или создав ярлык на экране. В случае с мобильной версией сайта, ярлык откроется в браузере, а PWA — отдельным приложением.
  • Уведомления. На сайте можно реализовать отправку браузерных уведомлений — web push. Они отображаются на экране мобильного устройства, но отправляет их не приложение, а браузер. Для отправки уведомлений пользователь должен дать разрешение, когда заходит на сайт. У PWA тоже есть возможность настроить уведомления, но пока есть трудности с реализацией на iOS. Однако Apple анонсировали, что проблема с пушами скоро решится.

Какие технологии используются для создания мобильной версии и PWA

Мобильные веб-приложения создаются с помощью технологий для реализации frontend: HTML, CSS, JavaScript — и backend: Ruby, PHP, Python и т. д. С точки зрения backend реализация не отличается от обычного веб-сайта. Любой мобильный веб можно превратить в PWA, если доработать под определённую цель. И это играет на руку бизнесу, который некогда развивал мобильный веб, но забросил. Теперь из мобильной версии сайта можно сделать PWA и запустить новый канал продаж.

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

  • React;
  • Angular;
  • Vue;
  • Polymer;
  • Flutter.

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

У Flutter есть ещё преимущества, о которых мы подробно писали:

  • Не требует специальной адаптации под веб. Так как кроссплатформа изначально предполагает приложение для трёх платформ: веба, десктопа и мобильных. Это позволяет сэкономить в среднем до 60% бюджета на разработку.
  • Код, написанный на Flutter, можно легко скомпилировать в PWA и обратно.

Концепт онлайн-банка на Flutter: для веба, десктопа и мобильных от Surf

Изучить прототип

PWA и сторы

Чтобы установить PWA, достаточно зайти в браузер на сайт, который использует настройки для отображения в режиме «нативного приложения». В PWA приложении доступна ровно такая же функциональность, которая доступна для браузера. Например, доступ к камере или геолокации. Однако некоторые нативные функции могут быть недоступны. Например, доступ к батарее или графическому процессору.

Но это тоже решаемо:

  • Запустить TWA (Trusted Web Activities) — это режим запуска браузера на базе Android Custom Tab. Эта технология от Google предоставляет функции, которые сглаживают для пользователя переход от натива к вебу и дополнительные возможности для ОС Android.
  • Опубликовать приложение в Google Play. Тогда в PWA будут доступны: интегрированная монетизация, поддержка веб-уведомлений и анимации.
  • «Завернуть» в нативную оболочку и распространять через магазины приложений, но тогда может потеряться независимость от площадки. Барьер может возникнуть с App Store, так как он может отклонить приложение для размещения в магазине, если оно целиком дублирует поведение PWA без дополнительных функций. Читайте больше о том, почему App Store может отклонить приложение в нашей статье.

Почему PWA может не подойти бизнесу

Проблема №1 — в PWA невозможно встроить СКЗИ (средство криптографической защиты информации), нет готовых решений, согласованных с регулирующим органом. Это является одним из стоп-факторов применения PWA для банков.

Решение. На смартфоне пользоваться СКЗИ или электронной цифровой подписью можно. Ограничения есть только при использовании в мобильном браузере.

Проблема №2 — что выбрать: «приложение-зеркало» или PWA? Многие крупные компании и банки после удаления из сторов нашли быстрое решение: разместили свои нативные приложения, но под другими названиями.

Решение. Этот ход в краткосрочной перспективе позволил компаниям вернуться на площадки, однако в долгосрочной — после модерации многие были удалены. Кроме того, быстро создать приложение не получится, даже если каждая итерация тщательно записывалась в бэклог. На поднятие и развёртывание «приложения-зеркала» потребуется почти столько же ресурсов, сколько на написание с нуля. Экстремально короткие сроки обязательно скажутся на работоспособности приложения и отзывах пользователей.

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

Какие компании используют мобильный веб, а какие PWA

Мобильный веб

Мобильные версии официальных сайтов — не новинка, а скорее «хорошо забытое старое». Многие крупные компании в своё время развивали их вслед за десктопными версиями сайтов. Однако после роста популярности мобильных приложений отказались от их активного развития.

В мобильных версиях можно легко отразить визуальный код бренда, но формат будет всегда ограничен только самым необходимым: значком авторизации, лаконичным меню, поиском, корзиной (в e-commerce).

М.Видео, Booking, СберБанк, Тинькофф Журнал используют адаптивные версии своих сайтов. Источник: kokoc.com

PWA

Технология PWA — не новинка на рынке, однако стремительный рост показала относительно недавно. Многие компании создают прогрессивные веб-приложения для замены нативным или в качестве дополнительного канала продаж. PWA пользуют ритейлеры: Спортмастер, DNS; Тинькофф банк; сервисы: aviasales.ru, ivi.ru и соцсеть «В Контакте».

Пример PWA для банка
  • У PWA много достоинств (высокая скорость загрузки, независимость от браузеров, работа в офлайн режиме, гибкий UI\UX, возможность добавить иконку на экран смартфона, отправка уведомлений). PWA — это один из способов реализации мобильного веба.
  • Мобильный веб тоже может стать полноценным каналом сбыта. Всё зависит от целей, которые преследует бизнес.
0
11 комментариев
Написать комментарий...
Dark Soul

Добавить иконку на рабочий стол можно для любого веб-сайта, но вы правы, за pwa будущее. Я уже отказался от всех программ в пользу веб версий. Через браузер я могу контролировать предоставляемые данные, через апп не факт.

Ответить
Развернуть ветку
Surf
Автор

Спасибо, что читаете и поделились мнением! Скажите, а заметили, что смартфон в целом стал работать шустрее с переходом на веб-версии?

Ответить
Развернуть ветку
Dark Soul

У меня с этим проблем не было никогда, мощность позволяет не замечать. У меня iPhone если что.

Ответить
Развернуть ветку
Pavel Lobanov

Потыкал прототип банка, очень круто сделано! Но вопрос: PWA подходит для каких-то ещё сфер бизнеса, кроме описанных в статье?

Ответить
Развернуть ветку
Surf
Автор

Спасибо, что читаете :) PWA подходят абсолютно для всех сфер бизнеса. Всё, что можно сделать в вебе, можно реализовать и в PWA. Есть, конечно, свои особенности для каждой сферы: например, для банков будет важна безопасность, для e-commerce – удобство оформления покупки и т.д. Но всё реализуемо) Кстати, про концепт банка на Flutter можно подробнее почитать здесь: https://vc.ru/services/574332-kak-sozdat-universalnoe-prilozhenie-dlya-ios-android-veba-desktopa-i-sekonomit-60-byudzheta

Ответить
Развернуть ветку
Валера Старовойт

Вы говорите, что PWA может работать оффлайн, в примерах у вас Aviasales. Объясните, плз, как сервис по покупке билетов онлайн может работать оффлайн, как это вообще возможно? Или какой функционал остается в оффлайн?

Ответить
Развернуть ветку
Surf
Автор

Спасибо за ваш вопрос! Безусловно, нельзя целиком и полностью использовать клиент-серверное приложение в офлайн-режиме, но в каждом приложении можно выделить те данные, которые не изменяются. Например, купленный билет. При покупке билета само содержимое и информация по билету не изменяется, и мы можем хранить его в кеше устройства. И, когда не будет интернета, мы будем иметь к нему доступ.

Ответить
Развернуть ветку
evilUnion

Да PWA это классно!

Ответить
Развернуть ветку
Алексей Илларионов

PWA это не технология, это комбинация различных веб-инструментов (service worker, cache storage и тд). Ну да ладно, мы ж не на Хабре. Но из этого ложного тезиса вытекают уже грубые ошибки:

1. «Независимость от браузеров». Это неправда, функциональность PWA зависит от браузера (и не может не зависеть, потому что это обычный браузер).

2. «UI/UX близкий к нативному». Нет никаких фишек у PWA, просто потому что это не технология. UI/UX, близкий к нативному, делается с помощью CSS+JS без привязки к PWA.

И далее по тексту такие же ошибки, исходящие из того, что PWA - это технология.

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

Ответить
Развернуть ветку
Alexandr Svetlov

тогда никто не купит

Ответить
Развернуть ветку
Surf
Автор

Здравствуйте, спасибо за ваше мнение! Более подробно о PWA мы писали в этой статье https://vc.ru/services/424911-antikrizisnye-tehnologii-mozhet-li-pwa-stat-zamenoy-mobilnomu-prilozheniyu, где разобрали принцип действия. Цель этой – ответить на самые распространённые вопросы со стороны представителей бизнеса о возможных каналах дистрибуции своих цифровых продуктов.

Ответить
Развернуть ветку
8 комментариев
Раскрывать всегда