La pépite du jour est consacrée aux universal links
… mais de quoi s’agit-il ?
Le principe est simple : vous avez une application Web et une application mobile. Lorsqu’un utilisateur, depuis son mobile, tape sur un lien qui pointe vers votre application web et qu’il a également la version mobile installée, il sera alors redirigé vers cette dernière plutôt que sur le site. Top non ?
L’implémentation est somme toute très simple, elle se fait en 3 étapes :
1/ Autoriser votre application à utiliser les Associated Domains
Comme son nom l’indique, les Associated Domains
vous permettent d’associer des domaines web à votre app. Il sont donc indispensables pour les universal links
. Pour cela, direction le portail développeur Apple, section Certificates, Identifiers & Profiles
. Éditez l’App ID
souhaité et activer Associated Domains
dans les Capabilities
de votre app. Bon, vous vous en doutez, ce n’est pas aussi magique : il vous faudra régénérer les provisioning profiles
associés à cet App ID 🥳
2/ Définir les domaines Webs à rediriger
C’est la partie la plus facile : dans votre projet Xcode, sélectionnez votre target, puis dans Signing & Capabilities
ajoutez une nouvelle Capability
et sélectionnez Associated Domains
. Une nouvelle partie portant le même titre vient d’apparaitre où vous pourrez ajouter tous les domaines souhaités. Le nommage à respecter est le suivant : applinks:domain.extension
Par exemple :
applinks:xebicon.fr
3/ Définir l’app vers laquelle votre site web va faire la redirection
Il s’agit d’un simple fichier au format JSON à placer sur votre serveur (veillez à configurer correctement votre serveur afin que celui-ci renvoie le fichier au format JSON sans compression : votre navigateur doit pouvoir afficher le fichier directement et non le télécharger). Créez un fichier vide portant le nom apple-app-site-association
(sans extension), puis définissez votre app à ouvrir comme suit :
{ "applinks": { "apps": [], "details": [ { "appID": "{APPLE_TEAM_ID}.{APP_BUNDLE_ID}", "paths": ["*"] } ] } }
La valeur pour la clef appID
doit respecter un format bien précis, composé d’une part du team ID
(que vous retrouvez dans le détail de votre App ID
sur le portail Apple, sous le titre App ID Prefix
) et d’autre part du bundle ID
de votre app. Par exemple : T9UHPNS5GN.fr.xebia.xebicon
(T9UHPNS5GN
étant le team ID et fr.xebia.xebicon
le bundle ID)
Vous noterez également la clef paths
qui prend pour valeur un tableau de strings. Vous pouvez ici spécifier précisément les parties de votre site qui doivent rediriger (ou non) vers votre app. Dans notre exemple, nous utilisons la wildcard *
qui indique que l’ensemble du site redirigera vers l’app.
Attention toutefois : si votre site Web comporte des pages exclusives que vos utilisateurs ne peuvent pas retrouver dans l’app, vous pourriez le priver de certains contenus… si vous souhaitez donc être plus précis, vous pouvez définir autant de chemins que vous le souhaitez. Par exemple :
"paths": ["/programme-xebicon-2019", "/programme-xebicon-2019/*", "/our-speakers"]
Autres options : utiliser le ?
pour matcher n’importe quel caractère et le mot clef NOT
pour exclure certains chemin.
"paths": ["/programme-xebicon-20??"] "paths": ["*", "NOT /tech4exec-2019/"]
Enfin, vous noterez que la clef details
du JSON est un tableau, vous pouvez donc spécifier plusieurs apps. Si l’utilisateur a plusieurs apps installées, la priorité est donnée dans l’ordre du JSON.
Il ne vous reste plus qu’à placer ce fichier sur votre serveur à un endroit bien précis : dans le sous-dossier racine .well-known/
Et maintenant, testons tout cela ! Un point important : la redirection ne fonctionne pas si vous ouvrez un navigateur mobile et que vous entrez l’adresse de votre site web. Elle fonctionne uniquement depuis un lien, par exemple depuis un mail ou encore un QR code scanné depuis un device.
Pour facilement tester votre implémentation, utilisez un générateur de QR code online (par exemple https://www.the-qrcode-generator.com/) et scannez votre écran avec votre iPhone. Votre OS devrait automatiquement vous proposer d’ouvrir l’application !
Nous en avons fini pour l’essentiel : rediriger vos utilisateurs mobiles vers votre app plutôt que votre site Web.
Néanmoins, pour améliorer encore davantage l’expérience utilisateur, il serait intéressant d’intercepter dans votre app l’URL source appelée et de rediriger vers le bon écran… ce qu’on appelle du deep linking
.
One more thing/ Rediriger vers le bon écran
Il vous suffit d’implémenter une méthode dans votre AppDelegate
, intercepter l’URL, la parser et afficher l’écran souhaité :
func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([Any]?) -> Void) -> Bool { switch userActivity.activityType { case NSUserActivityTypeBrowsingWeb: guard let url = userActivity.webpageURL else { return false } // display the correct screen corresponding to the url return true default: return false } }