Просто и удобно, или Почему будущее — за прогрессивными веб-приложениями

Как прокачать мобильную версию сайта, чтобы всё работало даже в офлайне

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

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

Теперь та же проблема, но с другим решением. Маша тоже должна поднять уровень конверсий старого неудобного сайта. Но она понимает, что устанавливать приложение станут не все. Нельзя забывать, что 49% пользователей не скачивают ни одного приложения за месяц, но за это же время посещают более 100 разных сайтов. Поэтому Маша решает развивать и то, и другое. В этом ей помогут PWA — прогрессивные веб-приложения.

PWA

Прогрессивные веб-приложения совмещают в себе простоту использования веб-сайтов и технические возможности нативных приложений. Есть три целевых показателя, которых должны достигать PWA: fast (быстрота), reliable (надежность) и engaging (вовлечение). Внешне PWA похожи на обычные нативные приложения, а еще они работают даже без интернета. Обычные мобильные сайты часто кажутся неудобными — но прогрессивные веб-приложения созданы именно для того, чтобы улучшить пользовательский опыт. Такие веб-страницы работают одинаково просто и понятно во всех браузерах.

Почему PWA — источник крутого пользовательского опыта?

Скорость. PWA-сайт работает гораздо быстрее — в том числе за счет кэширования.

Возможность установки. PWA можно добавить на главный экран и/или в Google Play, совсем как нативное приложение.

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

Вовлечение. Речь идет о новых браузерных API (Application Programming Interface, или интерфейсах программирования приложений). С их помощью можно создать функционал, которого в мобильных сайтах раньше не было.

Как, помимо использования PWA, улучшить пользовательский опыт?

  1. Ускорьте загрузку, оптимизировав сайт
  • Минифицируйте JS и CSS — оптимизируйте коды с помощью минификатора (сжимателя)
  • Оптимизируйте картинки — сжимайте их без потери качества
  • Используйте lazy-loading («ленивую» загрузку) — так изображения будут загружаться только при показе видимой части страницы

Поисковые запросы в Google сейчас растут только за счет мобильных устройств. Неважно, будете ли вы использовать PWA — нужно оптимизировать сайты и картинки в них. Благодаря такой проработке Hoff повысил уровень мобильных конверсий на 15%.

  1. Дайте пользователям возможность добавить веб-сайт на домашний экран

Разместите на своем сайте баннер с информацией о том, что страницу можно добавить на домашний экран. С добавлением этой функции сайт asda.com (Walmart) привлек на 28% больше пользователей.

  1. Ускорьтесь с помощью кэширования

Это касается только работы с теми пользователями, которые уже заходили на ваш сайт. Кэшируйте его в фоновом режиме — так при следующих визитах информация будет загружаться быстрее. Это первый шаг к полноценному офлайну. Кэширование можно контролировать: только вы выбираете, что будет загружаться, что показать пользователю в фоновом режиме и т.д. Благодаря этому методу у Pinterest на 30% сократилось время повторной загрузки.

  1. Расширьте офлайн-функционал

Дайте пользователям возможность полнее использовать сайт в офлайне. Показывайте им уведомления о том, что сеть недоступна. Так пользователи поймут, что проблема — в качестве соединения, а не в сайте.

Удобство использования PWA зависит и от браузера. Пока что прогрессивные веб-приложения лучше работают с Android, а на iOS их поддерживает только Safari.

image2.png

Чтобы получить максимум от инвестиций в мобильную версию сайта, загрузите 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
Как меняется рынок шопинг-приложений: новые лидеры и необычные кейсы