Как прокачать мобильную версию сайта, чтобы всё работало даже в офлайне
Быстрый, удобный и красивый сайт, не уступающий приложению — реальность. PWA (Progressive Web Apps — прогрессивные веб-приложения) позволяют предложить пользователям такой опыт и уровень вовлечения, который обычно считают достижимым только в приложениях.
Представим ситуацию: Петя должен выполнить задание своей компании — увеличить конверсии в мобайле. Сайт, с которым ему нужно работать, очень старый и неудобный. Для Пети мобайл — это только приложение. Поэтому Петя предлагает всем посетителям сайта скачать приложение. Результат — высокие конверсии. Но охват мобильной версии сайта падает, а посетители уходят к конкурентам из-за негативного пользовательского опыта.
Теперь та же проблема, но с другим решением. Маша тоже должна поднять уровень конверсий старого неудобного сайта. Но она понимает, что устанавливать приложение станут не все. Нельзя забывать, что 49% пользователей не скачивают ни одного приложения за месяц, но за это же время посещают более 100 разных сайтов. Поэтому Маша решает развивать и то, и другое. В этом ей помогут PWA — прогрессивные веб-приложения.
PWA
Прогрессивные веб-приложения совмещают в себе простоту использования веб-сайтов и технические возможности нативных приложений. Есть три целевых показателя, которых должны достигать PWA: fast (быстрота), reliable (надежность) и engaging (вовлечение). Внешне PWA похожи на обычные нативные приложения, а еще они работают даже без интернета. Обычные мобильные сайты часто кажутся неудобными — но прогрессивные веб-приложения созданы именно для того, чтобы улучшить пользовательский опыт. Такие веб-страницы работают одинаково просто и понятно во всех браузерах.
Почему PWA — источник крутого пользовательского опыта?
Скорость. PWA-сайт работает гораздо быстрее — в том числе за счет кэширования.
Возможность установки. PWA можно добавить на главный экран и/или в Google Play, совсем как нативное приложение.
Надежность. Пользователи не доверяют медленным неудобным сайтам и уж тем более не станут платить за товар или услугу через сайт с неудачным интерфейсом. PWA же внушает доверие скоростью работы и качеством «обертки».
Вовлечение. Речь идет о новых браузерных API (Application Programming Interface, или интерфейсах программирования приложений). С их помощью можно создать функционал, которого в мобильных сайтах раньше не было.
Как, помимо использования PWA, улучшить пользовательский опыт?
- Ускорьте загрузку, оптимизировав сайт
- Минифицируйте JS и CSS — оптимизируйте коды с помощью минификатора (сжимателя)
- Оптимизируйте картинки — сжимайте их без потери качества
- Используйте lazy-loading («ленивую» загрузку) — так изображения будут загружаться только при показе видимой части страницы
Поисковые запросы в Google сейчас растут только за счет мобильных устройств. Неважно, будете ли вы использовать PWA — нужно оптимизировать сайты и картинки в них. Благодаря такой проработке Hoff повысил уровень мобильных конверсий на 15%.
- Дайте пользователям возможность добавить веб-сайт на домашний экран
Разместите на своем сайте баннер с информацией о том, что страницу можно добавить на домашний экран. С добавлением этой функции сайт asda.com (Walmart) привлек на 28% больше пользователей.
- Ускорьтесь с помощью кэширования
Это касается только работы с теми пользователями, которые уже заходили на ваш сайт. Кэшируйте его в фоновом режиме — так при следующих визитах информация будет загружаться быстрее. Это первый шаг к полноценному офлайну. Кэширование можно контролировать: только вы выбираете, что будет загружаться, что показать пользователю в фоновом режиме и т.д. Благодаря этому методу у Pinterest на 30% сократилось время повторной загрузки.
- Расширьте офлайн-функционал
Дайте пользователям возможность полнее использовать сайт в офлайне. Показывайте им уведомления о том, что сеть недоступна. Так пользователи поймут, что проблема — в качестве соединения, а не в сайте.
Удобство использования PWA зависит и от браузера. Пока что прогрессивные веб-приложения лучше работают с Android, а на iOS их поддерживает только Safari.

Чтобы получить максимум от инвестиций в мобильную версию сайта, загрузите PWA в Google Play с помощью TWA (Trusted Web Activities). Эта функция позволяет распространять PWA через каталог Google Play и запускать Chrome без UI (интерфейса пользователя) в автономном режиме для нативных пакетов. TWA — один из самых удобных способов отображать веб-контент в Android-приложении.
Загрузка PWA в Google Play подходит тем, у кого:
- Есть хорошее PWA, но нет Android-приложения
- Есть старое Android-приложение, которое редко обновляется (или не обновляется вообще из-за недостатка ресурсов)
- Есть отличное, но «тяжелое» Android-приложение, нужно что-то предложить пользователям маломощных устройств/пользователям с медленным соединением
… и не подходит, если:
- Нужен featuring в Play Store и биллинг в Google Play
- PWA низкого качества, а планов инвестировать в сайт нет
- Есть отличное Android-приложение, но нет бизнес-кейса для «легкой» версии
- Нужен функционал, недоступный в Chrome
Критерии качества для публикации TWA
TWA, публикуемые в Play Store, должны быть высококачественными PWA.
- Подходить требованиям политики Play Store для нативных приложений
- Проходить аудит Installable Lighthouse и большую часть аудита Fast & Reliable
- Выполнять минимальный Lighthouse Performance — 80