Привет! Меня зовут Кирилл. Моя команда в Додо отвечает за развитие на международных рынках. Мы часто заигрываем с новыми технологиями и делаем прикольные фичи, такие как Live Activities и AI-пицца.

Недавно у нас дошли руки до App Clips. Мы решили разобраться, могут ли они быть нам полезны, сделали своё мини-приложение и запустили его на проде.

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

Что такое App Clip

App Clips — это мини-приложения, которые открываются по ссылке. С их помощью можно быстро выполнять задачи, не устанавливая полную версию приложения. Каждый App Clip должен быть заточен на выполнение определённой задачи. Это может быть аренда самоката, заказ еды, оплата парковки и так далее.

Но что последнее вы слышали про App Clips? Как я помню хронологию:

• Apple анонсировала новую технологию;

• пронеслась волна статей «Как сделать App Clip?»;

• потом ходили слухи, что кто-то сделал мини-приложение, но вживую им никто не пользовался;

• тема заглохла;

• начали встречаться статьи «Почему App Clips не взлетел?».

Почему мы вспомнили про App Clip

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

Один из способов привлечь пользователей в приложение — предложить необычный опыт. Например, с помощью новых для нас технологий, таких как App Clip. Это интересное решение, но удачных примеров его использования мало. Сейчас мы фокусируемся на рынке ОАЭ, где 70% наших пользователей — владельцы iPhone. Это отличная возможность, чтобы поэкспериментировать с App Clip.

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

Какой App Clip решили делать

Изначально мы решили проверить технологию минимальными усилиями. Знаете механику, когда вместе с пиццей вам привозят флаер с промокодом на следующий заказ? Мы хотели реализовать это в App Clip — напечатать на коробке с пиццей QR-код, ведущий на App Clip с акцией. Так мы смогли бы проверить технологию, а пользователь — сохранить акцию из App Clip в профиле основного приложения. Но от такого варианта нам пришлось отказаться, потому что Apple запрещает использовать мини-приложения исключительно в маркетинговых целях.

Чтобы минимизировать риск того, что мы не сможем пройти ревью Apple из-за нарушения каких-нибудь правил, мы решили пойти консервативным путём. Выбрали фичу, которую точно пропустят на ревью, — отслеживание статуса заказа, сделанного в киоске (он же терминал, он же касса самообслуживания).

Из каких частей состояла разработка

Путь клиента получается следующим:

• пользователь оформляет заказ в киоске;

• сканирует QR-код;

• открывается App Clip, где можно следить за статусом заказа;

• в App Clip есть баннер с акцией, по нажатию на который открывается App Store;

• если установить приложение, перейдя по баннеру, то при первом запуске приложение узнает пользователя и покажет акцию из App Clip.

Давайте разберёмся, что нам нужно сделать, кроме самого App Clip на iOS, чтобы реализовать задуманное.

Киоск

На экране киоска после оформления заказа должен отображаться QR-код, ведущий на App Clip.

Android

На Android тоже есть мини-приложения — Instant App. С ними сложнее, потому что непонятно, у скольких пользователей Instant App вообще поддерживаются.

Мы начали с того, что собрали аналитику. Так мы узнали, что более чем у 95% наших пользователей поддерживается Instant App.

Несмотря на отличный результат, мы решили повременить с разработкой Instant App. Нам не очень понравилось, что при сканировании QR-кода на Instant App пользователя всё равно перекидывает в Google Play, где ему будут доступны опции: «попробовать мини-приложение» или «установить полную версию». От этого пропадает вся магия App Clip — пользователю ничего не мешает сразу установить полную версию приложения.

Для синхронизации платформ при сканировании QR-кода в киоске на Android будем показывать web-страницу с отслеживанием статуса заказа… Подождите, какую web-страницу?

Web

Из-за ограничений на размер App Clip нам было сложно оценить, сколько времени займёт его разработка. Поэтому параллельно с разработкой App Clip мы решили сделать MVP с web-страницей для отслеживания статуса заказа.

Во-первых, мы знали, что web-страницу мы сделаем быстрее, чем App Clip. Она станет бенчмарком для нативной реализации.

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

В-третьих, мы сможем использовать эту web-страницу на Android-устройствах.

QR-код

QR-код должен содержать в себе данные для App Clip, в том числе и ID заказа. В нашем случае QR-код отображается на экране киоска, но его можно поместить и на другие поверхности. Например, на локаторы, которые используются для заказа до столика.

Работает QR-код следующим образом:

• iOS

  • Если приложение не установлено, то при сканировании открывается App Clip.

  • Если установлено, то открывается нативный трекинг заказа. Apple требует, чтобы основное приложение поддерживало тот же функционал, что есть в App Clip.

• Android

  • Если приложение не установлено, то при сканировании открывается Google Play. При первом запуске приложения после его установки откроется трекинг заказа в WebView.

  • Если установлено, то сразу открывается трекинг заказа в WebView.

Самый быстрый способ создать подходящий QR-код — через AppsFlyer. Он автоматически связывает приложение с сайтом посредством associated domains, поэтому нам не пришлось ничего доделывать. Мы просто выделили отдельный OneLink Template для App Clip и используем его.

Про особенности реализации

В Интернете есть много гайдов о том, как сделать App Clip. Я же хочу остановиться только на интересных моментах.

С чем не было проблем

• с вёрсткой на SwiftUI;

• с работой с сетью;

• с аналитикой;

• с локализацией;

• с настройкой provisioning profiles;

• с выделением кода из App Clip в отдельный модуль для его повторного использования в основном приложении;

• с генерацией таргета для App Clip через Tuist.

Микро-штучки, про которые можно было забыть

• App Clip ведёт себя как самостоятельное приложение, поэтому первым делом нужно настроить всё то же, что и для полноценного приложения:
  

  • отключить горизонтальную ориентацию, если она не нужна;

  • добавить иконку;

  • локализовать название App Clip.

• Вам может показаться, что можно убрать из Info.plist в таргете App Clip информацию о LaunchScreen, но это не так. Здесь работает так же, как и в обычных приложениях: если сделать это, то App Clip будет открываться не на всю высоту экрана.

  Убираем:

  <key>UILaunchStoryboardName</key>
  <string>LaunchScreen.storyboard</string>

  Получаем:

Откуда App Clip берёт ID заказа

Вернёмся к QR-коду, размещённому на экране киоска. QR-код должен содержать в себе все данные, необходимые для запуска App Clip.

Когда пользователь сканирует QR-код, ссылка, содержащаяся в нём, прилетает в метод handleUserActivity(_ userActivity: NSUserActivity). Распарсить ссылку и получить все нужные параметры — дело техники.

Чтобы это протестировать, можно воспользоваться Environment Variables в аргументах запуска схемы App Clip, и указать там _XCAppClipURL.

Сколько весит App Clip

App Clips доступны с iOS 14. Apple выдвигает жёсткие ограничения на размер App Clip:

• iOS 14: 10 MB;

• iOS 15: 10 MB;

• iOS 16: 15 MB;

• iOS 17: 50 MB для запуска через цифровые носители и 15 MB для запуска через физические носители (NFC tags или App Clip codes).

Несколько лет назад на внутреннем хакатоне мы уже пытались сделать App Clip, но не прошли по ограничениям на его размер. С тех пор мы активно распиливали приложение на модули, но App Clip больше сделать не пытались. Сейчас около 85% приложения находится в модулях.

В ходе нашего эксперимента мы хотели узнать, сможем ли мы создать App Clip, не превысив лимит. Первая версия получилась такой: App size: 4,4 MB compressed, 8,1 MB uncompressed. В эту версию вошёл не только код App Clip, но и некоторые из фреймворков основного приложения:

• модуль с доменными моделями;

• модуль для отправки логов;

• модуль аналитики;

• сетевой модуль;

• модуль для хранения данных.

Мы уложились в самое жёсткое ограничение. Наш App Clip сможет запускаться, как и наше приложение, на устройствах с iOS 14 и новее.

Как вести на установку приложения

1. Воспользоваться нативной всплывашкой, с помощью:

func appStoreOverlay(
    isPresented: Binding<Bool>,
    configuration: @escaping () -> SKOverlay.Configuration
) -> some View

2. Сделать кастомную кнопку, которая будет вести в App Store.

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

По нажатию на баннер ведём пользователя в App Store на страницу основного приложения. После того, как пользователь установит приложение и дойдёт до меню, он должен увидеть обещанную акцию и узнать, где она сохранится.

Однако возникает вопрос, причём не один. Как мы узнаем, что пользователь установил приложение, перейдя из App Clip? Должен ли он давать разрешение на использование своих данных? Можно ли не использовать идентификатор устройства для рекламодателей (IDFA)? Давайте разберёмся.

Что с IDFA

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

OneLink ведёт пользователя в AppStore и содержит в себе диплинк на наше приложение. Однако выполнение функции последнего возможно только в том случае, если пользователь даст разрешение на отслеживание (IDFA). Если он этого не сделает, то не получит специальное предложение, поскольку мы не можем понять, откуда он установил приложение.

В сценарии установки приложения из App Clip мы решили пойти другим путём.

Можно настроить общее хранилище UserDefaults для App Clip и основного приложения с помощью App Groups. Когда пользователь нажимает на баннер, чтобы установить приложение, мы сохраняем ID акции в UserDefaults, а после установки проверяем это значение из основного приложения. Неважно, даст ли пользователь разрешение на отслеживание — мы в любом случае поймём, что он установил приложение из AppClip и пришлём ему акцию.

Можно ли получить доступ к геолокации

Да, можно. Есть два пути:

1. Мы можем проверить, что App Clip запущен в определённом месте.
   Передаём iOS координаты и радиус до 500 метров. В ответ получаем true или false.
   iOS отвечает на вопрос, был ли App Clip запущен в этом радиусе от заданных координат.
   
   Это нужно, к примеру, чтобы проверить, что App Clip открыли именно в пиццерии. Если использовать эту фичу, то у пользователя отобразится запрос на доступ к геопозиции.

2. Запросить координаты пользователя, как это делают обычные приложения.
   Это работает, но нам нужно разрешение пользователя на использование его геопозиции. Правда, и ему, и ревьюеру Apple нужно будет объяснить, зачем нам эти данные.

Аналитика

Отправляем аналитику на наш бэкенд так же, как в основном приложении.

Из особенностей стоит отметить, что в App Clip свойство UIDevice.current.identifierForVendor возвращает 000000-0000-000000. Это связано с особенностью App Clips: Apple ограничила доступ к идентификатору из соображений безопасности.

Где срезали углы

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

• максимально упростили интерфейс со точки зрения дизайна — намеренно отказались от анимаций и разработки новых UI-компонентов. Например, переиспользовали progress bar из Live Activity для отображения статуса заказа;

• когда пользователь открывает App Clip, отсканировав QR-код, мини-приложение получает все нужные для запуска данные из ссылки. При этом App Clip сохраняется на девайсе ещё некоторое время после первого запуска, оставаясь доступным в библиотеке приложений. По-хорошему, на случай открытия App Clip из библиотеки приложений нужно реализовать в нём empty state или восстанавливать прошлый контекст. Мы оставили эту доработку для будущих версий;

• захардкодили акцию в App Clip;

• не сделали оценку заказа;

• не сделали пуши, потому что точно знали, что при необходимости мы сможем их добавить;

• не стали подключать сторонние системы аналитики, такие как AppsFlyer, напрямую к App Clip, чтобы не увеличивать его размер;

• не использовали дизайн-систему из основного приложения. Так получилось, что в модуле с нашими дизайн-компонентами, хранятся ещё и все картинки приложения. При подключении такого модуля к App Clip как есть мы точно не уложились бы в ограничения. А разносить картинки и дизайн-компоненты по разным модулям не было времени.

Как тестировали

Тестировали через TestFlight, во время разработки App Clip обращался к тестовому стенду.

Про загрузку в App Store и отправку на ревью

Чтобы отправить сборку с App Clip на ревью, нужно заполнить дополнительные поля в App Store Connect и предоставить ревьюверу ссылку для проверки App Clip.

Отправка сборок на ревью у нас автоматизирована с помощью fastlane, но App Clip её сломал:

По-быстрому починить не получилось, потому что fastlane не поддерживает работу с App Clip. Пока App Clip у нас на стадии эксперимента, решили, что будем заполнять данные для него вручную. Если оставим App Clip, то автоматизируем этот процесс.

Ещё я не смог с первого раза правильно прочитать документацию и при настройке associated domains в entitlements вместо:

<string>appclips:domain.ru</string>

по привычке написал:

<string>applinks:domain.ru</string>

В итоге уже на самом финише мы потратили несколько часов на то, чтобы понять, в чём ошибка, исправить, дождаться новой сборки и так далее. Будьте внимательнее.

Ревью — самый непредсказуемый этап. Мы отправили сборку с App Clip ещё до того, как довели его до ума, чтобы выиграть время и узнать, появятся ли на ревью какие-либо замечания. Оказалось, что мы напрасно переживали — ревью прошло гладко и без вопросов.

Результаты

Киоски есть в нескольких городах России, в каждом из них мы запустили App Clip. Как и обещал, делюсь цифрами:

• Около 5% пользователей, оформивших заказ в киоске, сканируют QR-код;

• 28% пользователей App Clip устанавливают приложение, перейдя по баннеру;

• В App Clip в 4 раза чаще переходят по баннеру на установку приложения по сравнению с web-страницей.

Выглядит неплохо. Уже думаем над тем, как прокачать этот App Clip.

Что дальше

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

1. Развлечения. Мы не хотим, чтобы гости скучали, пока ждут свой заказ. С помощью App Clip они смогли бы:
   

   • управлять музыкой в пиццерии;

   • участвовать в розыгрыше промокодов;

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

2. Акции и предложения. Мы постоянно открываем новые пиццерии и присылаем нашим гостям акции и специальные предложения. В App Clip мы могли бы интегрировать:
   

   • меню и акции. Пользователь мог бы получать уведомление с ними, когда проходит мимо нашей пиццерии. Для этого нам бы понадобилась интеграция с Apple Maps;

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

3. Продвижение фич и самого приложения Додо Пицца. Вынести в App Clip можно:
   

   • AI-генератор пиццы, который был доступен пользователям из ОАЭ. В App Clip ИИ мог бы генерировать состав, название и описание пиццы, а для её заказа — пользователь скачивал бы приложение;

   • оценку заказа. В некоторых странах, где мы работаем с агрегаторами, с их помощью нельзя подробно оценить заказ, а у нас можно.

Как думаете, стоит делать?