Как определить стратегию установки

Demián Renzulli

Pete LePage

Раньше установка приложений была возможна только в контексте приложений для конкретной платформы. Сегодня современные веб-приложения предлагают устанавливаемые возможности, которые обеспечивают тот же уровень интеграции и надежности, что и приложения для конкретной платформы.

Добиться этого можно разными способами:

• Установка PWA из браузера .
• Установка PWA из магазина приложений .

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

В этом руководстве рассматриваются лучшие практики комбинирования различных вариантов установки, чтобы увеличить скорость установки и избежать конкуренции и каннибализации платформ. Рассматриваемые предложения по установке включают PWA, установленные как из браузера, так и из App Store, а также приложения для конкретной платформы.

Зачем делать свое веб-приложение доступным для установки?

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

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

• Ограничения на хранилище: установка нового приложения может означать удаление других или очистку места путем удаления ценного контента. Особенно это невыгодно для пользователей бюджетных устройств.
• Доступная пропускная способность: загрузка приложения может оказаться дорогостоящим и медленным процессом, особенно для пользователей с медленным соединением и дорогими тарифными планами.
• Трение: выход с веб-сайта и переход в магазин для загрузки приложения создает дополнительные трудности и задерживает действие пользователя, которое могло бы быть выполнено непосредственно в Интернете.
• Цикл обновления: внесение изменений в приложения для конкретной платформы может потребовать прохождения процесса проверки приложения, что может замедлить изменения и эксперименты (например, A/B-тесты).

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

Если размер этого сегмента значителен, это хороший признак того, что вам необходимо предоставить альтернативные способы внедрения вашего опыта.

Продвижение установки вашего PWA через браузер

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

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

PWA как основной вариант установки

Как только PWA соответствует критериям установки , большинство браузеров показывают, что PWA можно установить. Например, в настольном Chrome в адресной строке отображается устанавливаемый значок, а в мобильном — мини-информационная панель:

Мини-информационная панель.

Хотя в некоторых случаях этого может быть достаточно, если ваша цель — увеличить количество установок вашего PWA, мы настоятельно рекомендуем вам прислушаться к BeforeInstallPromptEvent и следовать шаблонам для содействия установке вашего PWA.

Не позволяйте PWA снижать частоту установок приложений для конкретной платформы.

В некоторых случаях вы можете продвигать установку вашего приложения для конкретной платформы через PWA, но в этом случае мы все равно рекомендуем вам предоставить механизм, позволяющий пользователям устанавливать ваше PWA. Этот запасной вариант позволяет пользователям, которые не могут или не хотят устанавливать ваше приложение для конкретной платформы, получить аналогичный опыт установки.

Первым шагом для реализации этой стратегии является определение эвристики того, когда вы будете показывать пользователю рекламу установки вашего PWA.

Например: пользователь PWA — это пользователь, который увидел приглашение на установку приложения для конкретной платформы, но не установил приложение для конкретной платформы. Они возвращались на сайт как минимум пять раз или нажимали на баннер приложения, но вместо этого продолжали использовать сайт.

Тогда эвристику можно реализовать следующим образом:

1. Покажите баннер установки приложения для конкретной платформы.
2. Если пользователь отклоняет баннер, установите файл cookie с этой информацией (например document.cookie = "app-install-banner=dismissed" ).
3. Используйте другой файл cookie для отслеживания количества посещений сайта пользователем (например, document.cookie = "user-visits=1" ).
4. Напишите функцию, например isPWAUser() , которая использует информацию, ранее сохраненную в файлах cookie, вместе с API getInstalledRelatedApps() , чтобы определить, считается ли пользователь «пользователем PWA».
5. Когда пользователь выполняет значимое действие, вызовите isPWAUser() . Если функция возвращает true и приглашение на установку PWA было сохранено ранее, вы можете отобразить кнопку установки PWA.

Продвижение установки вашего PWA через магазин приложений.

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

В этом разделе мы разделим приложения в магазине на две группы:

• Приложения для конкретной платформы: эти приложения в основном создаются с использованием кода, специфичного для платформы. Их размеры зависят от платформы, но обычно они превышают 10 МБ на Android и 30 МБ на iOS. Возможно, вы захотите продвигать свое приложение для конкретной платформы, если у вас нет PWA или если приложение для конкретной платформы предоставляет более полный набор функций.
• Легкие приложения: эти приложения также могут быть созданы с использованием кода, специфичного для платформы, но обычно они создаются с использованием веб-технологий и упаковываются в оболочку, специфичную для платформы. Полные версии PWA также можно загрузить в магазины. (Это обсуждается далее в этой статье.) Некоторые компании предпочитают предоставлять их как «облегченные» возможности, а другие также используют этот подход для своих флагманских (основных) приложений.

Продвижение легких приложений

Согласно исследованию Google Play , на каждые 6 МБ увеличения размера APK коэффициент конверсии установок снижается на 1%. Это означает, что скорость завершения загрузки приложения размером 10 МБ может быть примерно на 30% выше, чем у приложения размером 100 МБ!

Чтобы решить эту проблему, некоторые компании используют свои PWA для предоставления облегченной версии своего приложения в Play Store с использованием доверенных веб-действий (TWA). TWA оборачивают ваше PWA в компонент, подобный веб-просмотру, и размер результирующего приложения обычно составляет всего несколько мегабайт.

Oyo, одна из крупнейших гостиничных компаний Индии, создала облегченную версию своего приложения и разместила ее в Play Store с помощью TWA. На момент написания этой статьи размер приложения Oyo составлял всего 850 КБ, что составляло всего 7% размера приложения для Android. И после установки оно неотличимо от их приложения для Android:

OYO Lite в действии.

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

Обеспечение легкого веб-интерфейса

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

В Интернете можно получить сигналы устройств и приблизительно сопоставить их с категориями устройств (например, «высокий», «средний» или «низкий»). Эту информацию можно получить разными способами, используя либо API JavaScript, либо подсказки клиента.

Использование JavaScript

Используя свойства JavaScript, такие как navigator.hardwareConcurrency , navigator.deviceMemory и navigator.connection , вы можете получить информацию о процессоре устройства, памяти и состоянии сети соответственно. Например:

const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`

Использование клиентских подсказок

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

Сначала сообщите браузеру, что вы заинтересованы в получении подсказок по памяти устройства, в заголовке HTTP-ответа на любой сторонний запрос:

HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory

Затем вы начнете получать информацию Device-Memory в заголовке HTTP-запроса:

GET /main.js HTTP/1.1
Device-Memory: 0.5

Вы можете использовать эту информацию в своих бэкэндах для хранения файлов cookie с категорией устройства пользователя:

app.get('/route', (req, res) => {
  // Determine device category

 const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';

  // Set cookie
  res.setCookie('Device-Category', deviceCategory);
  …
});

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

if (isDeviceMidOrLowEnd()) {
   // show "Lite app" install banner or PWA A2HS prompt
} else {
  // show "Core app" install banner
}

Примечание. Подробное описание методов сопоставления сигналов устройств с категориями устройств выходит за рамки данного руководства, но вы можете ознакомиться с руководством по адаптивной загрузке Адди Османи, API памяти устройства Филипа Уолтона и книгой Джереми Вагнера «Адаптация к пользователям с помощью клиентских подсказок». для получения дополнительной информации о передовом опыте в этом отношении.

Заключение

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