Liens profonds dans les applications natives React : tout ce que vous devez savoir !

Le deep linking est devenu un élément essentiel dans le monde interconnecté d'aujourd'hui. Le terme «liens profonds» peut sembler nouveau pour beaucoup; mais, la plupart d'entre vous doivent avoir utilisé le concept de liens profonds sous une forme ou une autre.

Vous souvenez-vous d'une instance dans laquelle vous avez cliqué sur un lien et ouvert directement un écran spécifique dans une application installée sur votre appareil ; sans avoir à naviguer manuellement dans l'application ? Ou, par exemple, vous vouliez que votre ami lise un article et partage l'URL de cet article. Votre ami a cliqué sur le lien et a été dirigé vers le contenu souhaité en une seule fois au lieu de devoir d'abord lancer la page d'accueil, puis rechercher l'article.

Vous êtes-vous déjà demandé comment cela se produit ?

Eh bien, c'est ce que fait le lien profond. Les utilisateurs cliquent sur un lien et sont redirigés vers un emplacement particulier dans une application mobile ou un site Web sans avoir à perdre de temps à naviguer via l'écran principal. D'autres exemples incluent le partage du lien d'une vidéo YouTube ou d'un produit Amazon avec un ami, l'ouverture d'un lien promotionnel d'une marque pour accéder à une page de produit spécifique, etc. Dans de tels scénarios, les liens profonds sont essentiels car les liens Web réguliers ne fonctionnent pas efficacement avec les applications mobiles natives.

Cet article vise à comprendre comment fonctionne le concept de liens profonds et à en apprendre davantage sur ses avantages. Nous aborderons également les étapes clés de la mise en œuvre des liens profonds dans les applications mobiles React Native pour les systèmes d'exploitation Android et iOS. Nous avons choisi le framework React Native car c'est l'une des préférences les plus populaires pour le développement d'applications mobiles de nos jours.

Qu'est-ce que le lien profond ?

Le lien profond est une technique qui permet de lier un contenu ou un écran particulier à l'intérieur d'une application mobile à partir d'une source externe comme une autre application ou un site Web. Les liens profonds sont des liens cliquables qui envoient immédiatement les utilisateurs vers un emplacement particulier dans une application mobile plutôt que vers une boutique en ligne ou un lien Web. Cet emplacement intégré à l'application peut être quelque chose comme un élément de contenu sécurisé derrière un paywall, un article, un produit ou un écran de connexion. Les utilisateurs peuvent atteindre l'emplacement souhaité dans l'application en cliquant simplement sur une URL ou une ressource sans avoir besoin de rechercher la page eux-mêmes.

Comment fonctionne le concept de Deep Linking ?

Les liens profonds spécifient un schéma d'URL personnalisé comme des liens universels (pour les appareils iOS) et une URL d'intention (pour les appareils Android). Lorsqu'un utilisateur clique sur un lien profond, le système d'exploitation intercepte le lien et ouvre l'application correspondante si elle est installée sur l'appareil de l'utilisateur. Les informations présentes dans le lien profond sont ensuite utilisées par l'application pour naviguer vers le contenu ou l'écran souhaité.

Liens profonds différés ?

Que se passe-t-il si les utilisateurs accèdent à une application en lien profond, mais que l'application n'est pas installée sur leur appareil ? Ici, les liens profonds différés entrent en jeu. Si un utilisateur clique sur un lien et que l'application à laquelle appartient le lien n'est pas téléchargée ; l'utilisateur est plutôt dirigé vers l'App Store. Ici, les utilisateurs sont dirigés vers l'emplacement exact de l'App Store où ils peuvent installer l'application souhaitée en un seul clic. Et, une fois l'application installée, l'écran spécifique s'ouvre immédiatement.

Quels sont les avantages des liens profonds ?

Les liens profonds font gagner du temps aux utilisateurs et améliorent considérablement l'expérience utilisateur.

Les liens profonds sont d'excellents outils pour les marques commerciales pour augmenter la rétention des utilisateurs ainsi que le taux de conversion. Les marques peuvent lier des campagnes promotionnelles et des incitations à des liens profonds ; rediriger les utilisateurs vers leur page produit en un seul clic. De cette façon, les marques peuvent facilement convaincre les utilisateurs d'essayer de nouveaux produits ou services. Par exemple, le propriétaire d'une application musicale souhaite promouvoir un nouvel album musical. Ainsi, le propriétaire investit dans la publicité et s'associe à un site Web célèbre. La couverture de l'album de musique avec un lien profond est affichée sur ce site Web en tant que campagne publicitaire. Lorsque les utilisateurs du site Web cliquent sur le lien profond, ils sont redirigés vers la page spécifique de l'application musicale et peuvent écouter l'album.

De plus, vous pouvez suivre les campagnes de liens profonds et vérifier les performances de vos campagnes. Les liens profonds améliorent également votre classement SEO et minimisent le taux de désabonnement de votre application.

Comment pouvez-vous implémenter des liens profonds dans les applications natives React ?

La bibliothèque de réaction de navigation fournit le module de liaison pour les applications React Native de liaison profonde. Cela s'avère pratique pour les développeurs React Native.

Vous devez définir un schéma de lien profond dans l'application qui mappera des URL spécifiques aux écrans d'application pertinents. react-navigation fournit des composants tels que le module Linking et le NavigationContainer pour définir le schéma. Après avoir défini le schéma, il peut être utilisé pour gérer les liens profonds entrants. Vous devez enregistrer une fonction de rappel à l'aide de la méthode addEventListner fournie par le module Linking pour gérer les liens profonds entrants. Lorsque l'application est lancée via un lien profond, la fonction de rappel est appelée. Cette fonction de rappel peut être utilisée pour naviguer dans l'écran souhaité dans l'application.

Configuration du Deep Linking dans iOS et Android

Vous devez configurer une application mobile avec un schéma d'URL (une URL unique). Ce schéma d'URL est responsable de la localisation et du lancement de l'application installée sur le smartphone de l'utilisateur. Pour que l'application navigue vers un écran, vous devez configurer des préfixes qui correspondent au schéma d'URL sur lequel l'application a été configurée. Ensuite, les écrans doivent être mappés dans l'application avec leurs chemins respectifs. Lorsque le chemin est attaché à l'URL, l'application est capable de naviguer directement vers des écrans spécifiques.

La configuration des liens profonds est un peu différente pour les systèmes d'exploitation iOS et Android. Voyons comment les développeurs professionnels de React Native implémentent les liens profonds pour Android et iOS !

Configuration des liens profonds dans les applications Android natives React

Étape 1 Définir les liens profonds

Ouvrez le fichier manifeste et définissez les liens profonds que vous prévoyez d'utiliser dans votre application afin que les utilisateurs puissent accéder directement à une page spécifique de l'application. Ici, vous devez définir un lien profond pour cette page spécifique. Voici comment définir un lien profond dans votre fichier AndroidManifest.xml :
<activité

android:name=".ProductActivity"

android:label="Produit">

<filtre d'intention>

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

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

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

<données

android:host="example.com"

android:pathPrefix="/products"

android:scheme="http" />

<données

android:host="example.com"

android:pathPrefix="/products"

android:scheme="https" />

</intent-filter>

</activité>

Étape 2 Configuration du filtre d'intention

Accédez à android/app/src/main et à partir de là, ouvrez le fichier nommé AndroidManifest.xml. Maintenant, vous devez configurer le filtre d'intention pour chaque lien profond. Le filtre d'intention spécifie la quantité de données et les actions que votre application est capable de gérer.

Étape #3 Traitement de l'intention

Vous devez gérer l'intention dans l'activité de votre application. Cet intent lancera votre application à partir d'un lien profond. Pour la gestion de l'intention, vous devez extraire les données de l'intention et déterminer l'emplacement particulier ou l'écran spécifique de votre application vers lequel vous souhaitez que les utilisateurs soient dirigés. Par la suite, votre projet doit être reconstruit dans l'émulateur Android.

Configuration des liens profonds dans les applications IOS natives React

Configurez votre schéma d'URL sous les types d'URL dans Xcode. Modifiez le fichier 'AppDelegate' et reconstruisez le projet dans l'émulateur iOS. Le projet iOS est maintenant ouvert dans Xcode.

Étape 1 Définir le schéma d'URL

Définissez un schéma d'URL personnalisé pour votre application. Ce schéma d'URL est un moyen unique pour votre application d'être identifiée. D'autres sites Web ou applications utiliseront cet identifiant unique pour lancer votre application.

Ouvrez le fichier info.plist. Ajoutez un nouveau type d'URL en haut de ce fichier. Le schéma d'URL peut être saisi dans le champ identifiant et schémas d'URL. Ensuite, développez l'élément 0 (zéro), sélectionnez les schémas d'URL et nommez l'élément 0. Ce nom est celui sous lequel votre application pourra être liée. Par exemple, le nom de votre application est "OurApp". Le schéma d'URL ressemblera à ceci "ourapp://" ou "ourapp://detail?id=123".

Étape 2 Gestion de l'implémentation du code

Maintenant, vous devez implémenter le code qui gérera le lien profond. Allez dans le fichier 'AppDelegate' et ajoutez une méthode pour gérer le schéma. Quand votre application sera lancée via le schéma d'URL ; cette méthode sera appelée. L'URL sera reçue par cette méthode. Les informations nécessaires seront extraites de l'URL et l'écran de droite s'affichera dans votre application.

Étape n ° 3 Test

Maintenant, le lien profond doit être testé. Pour cela, vous pouvez utiliser l'outil Safari ou toute autre application tierce prenant en charge le concept de lien profond. Par exemple, vous utilisez Safari. Ouvrez l'URL qui avait le schéma d'URL défini dans Safari. Par la suite, votre application se lance avec le bon écran.

Étape n ° 4 Gestion des liens universels

Outre l'ajout de schémas d'URL personnalisés, votre application peut également être configurée pour prendre en charge les liens universels (liens HTTPS standard utilisés par d'autres applications ou sites Web) pour lancer votre application. C'est ainsi que vous devez gérer les liens universels. Configurez les droits de votre application. Ensuite, créez le code approprié pour la gestion des liens universels et implémentez le code dans le délégué de votre application.

Maintenant, vous pouvez reconstruire votre projet dans le simulateur iOS.

Dernières pensées

J'espère que vous connaissez maintenant bien le concept de déconnexion ainsi que son processus d'exécution. Le deep linking est devenu une nécessité pour les applications d'aujourd'hui. Cependant, il est important de mener à bien le processus de mise en œuvre des liens profonds avec la plus grande expertise professionnelle. Si vous ne disposez pas de l'expertise technique ou des ressources nécessaires, une société de développement d'applications natives React expérimentée peut vous aider à naviguer sans effort dans le processus de création et d'exécution de liens profonds.