Quantcast
Channel: Publicis Sapient Engineering – Engineering Done Right
Viewing all articles
Browse latest Browse all 1865

Pépite #24 – Universal links sur iOS

$
0
0

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
	}
}

 

📚 Retrouvez la documentation sur developer.apple.com


Viewing all articles
Browse latest Browse all 1865

Trending Articles