Глубокие ссылки в приложениях React Native: все, что вам нужно знать!

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

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

Вы когда-нибудь задумывались, как это происходит?

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

Этот пост посвящен тому, чтобы понять, как работает концепция глубоких ссылок, и узнать о ее преимуществах. Мы также обсудим ключевые шаги по реализации диплинкинга в мобильных приложениях React Native для операционных систем Android и iOS. Мы выбрали фреймворк React Native, так как в наши дни он является одним из самых популярных вариантов для разработки мобильных приложений.

Что такое глубокие ссылки?

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

Как работает концепция глубоких ссылок?

Глубокие ссылки определяют настраиваемую схему URL-адресов, например универсальные ссылки (для устройств iOS) и URL-адрес намерения (для устройств Android). Когда пользователь нажимает на ссылку на контент, ОС перехватывает ссылку и открывает соответствующее приложение, если оно установлено на устройстве пользователя. Информация, представленная во внешней ссылке, затем используется приложением для перехода к нужному содержимому или экрану.

Отложенные глубокие ссылки?

Что делать, если пользователи получают глубокие ссылки на приложение, но приложение не установлено на их устройстве? Здесь в игру вступают отложенные глубокие ссылки. Если пользователь нажимает на ссылку, а приложение, которому принадлежит ссылка, не загружается; вместо этого пользователь направляется в App Store. Здесь пользователи перенаправляются в точное местоположение App Store, где они могут установить нужное приложение одним щелчком мыши. И как только приложение будет установлено, сразу же откроется конкретный экран.

Каковы преимущества глубоких ссылок?

Глубокие ссылки экономят время пользователей и значительно улучшают пользовательский опыт.

Глубокие ссылки — отличный инструмент для бизнес-брендов, позволяющий повысить удержание пользователей и коэффициент конверсии. Бренды могут связывать рекламные кампании и поощрения с глубокими ссылками; перенаправление пользователей на страницу их продукта всего одним щелчком мыши. Таким образом, бренды могут легко убедить пользователей попробовать новые продукты или услуги. Например, владелец музыкального приложения хочет продвигать новый музыкальный альбом. Итак, владелец инвестирует в рекламу и связывается с известным сайтом. Обложка музыкального альбома с глубокой ссылкой отображается на этом веб-сайте в качестве рекламной кампании. Когда пользователи веб-сайта нажимают на глубокую ссылку, они перенаправляются на определенную страницу в музыкальном приложении и могут прослушать альбом.

Кроме того, вы можете отслеживать кампании с глубокими ссылками и проверять их эффективность. Глубокие ссылки также улучшают ваш SEO-рейтинг и минимизируют отток вашего приложения.

Как реализовать глубокие ссылки в приложениях React Native?

Библиотека реагирования-навигации предоставляет модуль Linking для глубокого связывания приложений React Native. Это оказывается удобным для разработчиков React Native.

Вам необходимо определить схему глубоких ссылок в приложении, которая будет сопоставлять определенные URL-адреса с соответствующими экранами приложения. react-navigation предоставляет такие компоненты, как Linking module и NavigationContainer, для определения схемы. После определения схемы ее можно использовать для обработки входящих глубоких ссылок. Вам необходимо зарегистрировать функцию обратного вызова с помощью метода addEventListner, предоставляемого модулем Linking для обработки входящих глубоких ссылок. Когда приложение запускается через глубокую ссылку, вызывается функция обратного вызова. Эту функцию обратного вызова можно использовать для навигации по нужному экрану в приложении.

Настройка диплинкинга в iOS и Android

Вам необходимо настроить мобильное приложение со схемой URL-адресов (уникальный URL-адрес). Эта схема URL отвечает за поиск и запуск приложения, установленного на смартфоне пользователя. Чтобы приложение переместилось на экран, необходимо настроить префиксы, соответствующие схеме URL-адресов, на которой было настроено приложение. Затем экраны должны быть сопоставлены в приложении с соответствующими путями. Когда путь прикрепляется к URL-адресу, приложение может напрямую переходить к определенным экранам.

Настройка глубоких ссылок немного отличается для операционных систем iOS и Android. Давайте посмотрим, как профессиональные разработчики React Native реализуют диплинкинг для Android и iOS!

Настройка глубоких ссылок в приложениях React Native для Android

Шаг № 1. Определение глубоких ссылок

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

Android: имя = «.ProductActivity»

android:label="Продукт">

<намерение-фильтр>

<action android:name="android.intent.action.VIEW" />

<category android:name="android.intent.category.DEFAULT" />

<category android:name="android.intent.category.BROWSABLE" />

<данные

android:host="example.com"

android:pathPrefix="/products"

андроид: схема = «http» />

<данные

android:host="example.com"

android:pathPrefix="/products"

Android: схема = «https» />

</интент-фильтр>

</активность>

Шаг № 2. Настройка фильтра намерений

Перейдите в android/app/src/main и оттуда откройте файл с именем AndroidManifest.xml. Теперь вам нужно настроить фильтр намерений для каждой глубокой ссылки. Фильтр намерений указывает объем данных и действия, которые может обрабатывать ваше приложение.

Шаг № 3. Обработка намерений

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

Настройка глубоких ссылок в приложениях React Native IOS

Настройте схему URL-адресов в разделе «Типы URL-адресов» в Xcode. Измените файл AppDelegate и перестройте проект в эмуляторе iOS. Теперь проект iOS открыт в Xcode.

Шаг №1 Определение схемы URL

Определите настраиваемую схему URL-адресов для вашего приложения. Эта схема URL — уникальный способ идентификации вашего приложения. Другие веб-сайты или приложения будут использовать этот уникальный идентификатор для запуска вашего приложения.

Откройте файл info.plist. Добавьте новый тип URL-адреса вверху этого файла. Схема URL-адреса может быть введена в поле идентификатора и схемы URL-адреса. Затем разверните элемент 0 (ноль), выберите URL-схемы и назовите элемент 0. Это имя будет тем, с которым ваше приложение будет связываться. Например, название вашего приложения — «OurApp». Схема URL будет выглядеть так: «ourapp://» или «ourapp://detail?id=123».

Шаг № 2. Обработка реализации кода

Теперь вам нужно реализовать код, который будет обрабатывать глубокую ссылку. Перейдите в файл AppDelegate и добавьте метод для обработки схемы. Когда ваше приложение будет запущено через схему URL; этот метод будет вызван. URL будет получен этим методом. Необходимая информация будет извлечена из URL-адреса, и в вашем приложении отобразится нужный экран.

Шаг №3 Тестирование

Теперь необходимо протестировать глубокую ссылку. Для этого вы можете использовать инструмент Safari или любые другие сторонние приложения, поддерживающие концепцию глубоких ссылок. Например, вы используете Safari. Откройте URL-адрес с определенной схемой URL-адресов в Safari. После этого ваше приложение запускается с правильным экраном.

Шаг № 4. Обработка универсальных ссылок

Помимо добавления пользовательских схем URL-адресов, ваше приложение также можно настроить для поддержки универсальных ссылок — стандартных ссылок HTTPS, используемых другими приложениями или веб-сайтами — для запуска вашего приложения. Вот как вам нужно обрабатывать универсальные ссылки. Настройте права вашего приложения. Затем создайте соответствующий код для универсальной обработки ссылок и внедрите его в делегат вашего приложения.

Теперь вы можете перестроить свой проект в симуляторе iOS.

Последние мысли

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