Deep linking sur React Native

Quésaco

Le deep link est un lien qui redirige vers un contenu spécifique d'une application. Par exemple, lors d'une inscription vous recevez un mail avec un lien d'activation de compte. Lorsque vous cliquez sur ce lien, l'application s'ouvre. Vous êtes ensuite redirigé sur la page de confirmation d'inscription. Nous pouvons aussi imaginer que vous êtes sur le navigateur de votre smartphone et que vous cliquez sur le lien d'un site de vente... Et bien, si vous avez installé l'application mobile de ce site et que les développeurs ont bien fait leur travail, cette dernière affichera directement l'écran du produit ! Dans le cas contraire, vous serez forcé et contraint de poursuivre sur votre navigateur.

Différents types

Tout d'abord, on doit distinguer deux types de deep link :

Le deep link classique

Il s'agit d'URL qui se construisent de la manière suivante : monapp://contenu/params. Pour Facebook par exemple, elles auront plutôt cette apparence : fb://profile/313822313

Les Universal Link (IOS) ou App Link (Android)

Dans cette configuration, les liens seront des URL de type http:// ou https://. L'avantage de ces liens est d'être reconnu par toutes les applications et d'ouvrir le site internet sur votre navigateur si l'application n'est pas installée. C'est ce type de deep link dont nous allons parler dans la suite !

Configurer les fichiers

Android

Première étape, copier-coller les lignes ci-dessous dans le fichier AndroidManifest.xml (voir le gist ci-dessous). Ensuite, afin de s’assurer que vous possédez bien le domaine décrit dans le fichier AndroidManifest.xml, il faudra créer un dossier .well-known à la racine de votre serveur ou du sous-domaine et y insérer le fichier assetlinks.json (voir le gist). Attention ce fichier doit être servi via HTTPS La clé SHA-256 se génère grâce à la keystore et à la ligne de commande suivante : keytool -list -v -keystore [my-release-key.keystore]

iOS

En ce qui concerne iOS, le gist ci-dessous montre ce qu’il faut copier-coller dans le fichier AppDelegate.m. Le fichier qu’il faudra uploader dans le même dossier .well-known précédemment cité doit également être servi par connexion sécurisée. Cependant, il y a quelques étapes supplémentaires : Apple oblige ! Il faudra tout dans un premier temps linker la librairie RCTLinking de React Native.  Je ne vais pas revenir sur la marche à suivre ici car ce lien vous l’explique déjà très bien : https://facebook.github.io/react-native/docs/linking-libraries-ios#manual-linking    Seconde étape, connectez-vous à votre compte sur le site developer.apple.com. Activez ensuite la fonctionnalité « Associated Domains » dans la section Identifiers > App Ids qui correspond à votre application. Il s'agira désormais d'activer dans Xcode la fonctionnalité « Associated Domains » qui se trouve dans l’onglet « Capabilities » et ajouter les domaines que vous voulez en cliquant sur « + ». Remarque : par défaut, Xcode ajoute automatiquement webcredentials:example.com, double-cliquez sur la case et mettez applinks:votredomaine.com Il faudra aussi vérifier que le fichier Test.entitlements à bien été généré dans le dossier racine du projet iOS. Pour faire simple l'emplacement où se trouve le fichier AppDelegate.m ! Intégrer ce fichier à la phase de compilation…bon en français ça aide pas vraiment. Dans l’onglet Build Phases, dans la partie Copy Bundle Ressources, ajoutez votre fichier .entitlements comme ci-dessous : Et pour finir, il faut vérifier que le fichier .entitlement ait le bon « Target membership » ! Il faut pour ça, cliquer sur le fichier en question dans la colonne de gauche et regarder dans la colonne de droite la rubrique « Target Membership ». La case avec le nom du projet doit être cochée.

En savoir plus

Pour plus de précisions sur la configuration du deep linking sur iOS, je vous recommande cet excellent article qui m’a sauvé quand j’ai voulu mettre en place cette fonctionnalité https://medium.com/@abhimuralidharan/universal-links-in-ios-79c4ee038272 Il faut rendre à César ce qui lui appartient ! Reste plus qu’à tester ! Insérez le code suivant dans un composant de l’application :  Pour tester l’URL de deep linking avec l’émulateur Android, on peut utiliser la commande suivante :

adb shell am start -a android.intent.action.VIEW -d "https://domain.com/path/params"

Pour iOS, on peut tester en insérant l’URL dans une autre application de l’émulateur, par exemple Message, attendre que celle-ci soit active et cliquer dessus. Attention, insérer le lien dans Safari ne marchera pas. Une autre solution sera d’avoir l’application installée sur un vrai téléphone Android ou via Testflight pour iOS et d’envoyer un mail avec le deep link à l’utilisateur test. Et si tout se passe bien, au clic sur le lien, votre application doit s’ouvrir avec le message d’alerte suivant qui s’affiche : « Deep link: https://domain.com/path/params » Ce sera tout pour aujourd’hui !