Mobile Deep Linking

Transcript

1. DEEP LINKING Meetup Cross-Platform Native Mobile Dev Cyril CATHALA @CyrilCathala
2. Le deep linking, c’est quoi ?
3. C’est une méthode pour lancer une app mobile native via un lien
4. Une adresse web amène vers une page spécifique
5. Les deep links contiennent toutes les infos pour amener au contenu spécifique d’une app mobile!
7. EXPÉRIENCE UTILISATEUR Connecter site web & app Partage de contenu via Mail, SMS, Twitter… Indexer du contenu Lancer une app depuis un QR Code, Tag NFC, Beacon… Ouvrir une app depuis une autre app Ouvrir une notification push
8. L’implémentation du deep linking est à la charge du développeur
9. Place à la technique
10. URI Uniform Resource Identifier Identification d’une ressource sur le réseau
11. URL Uniform Resource Locator Adresse web
12. https://www.soat.fr/authors/cyril?rep=42
13. https://www.soat.fr/authors/cyril?rep=42 Scheme Domain/Host Path Query
14. URI Schemes
15. twitter://tweet/42 fb://profile/anne-honyme lafourchette://restaurant/zango75001
16. URI Schemes Tap sur un lien App installée ? Lancement de l’app Oops ! Affichage du contenu OUI NON
17. 1/ Déclaration du scheme (unique) 2/ Gestion des actions entrantes Configuration de l’app (iOS + Android)
18.  Communication entre apps  Cible les apps installées uniquement  Scheme lié à 1 ou plusieurs apps  Fenêtre de dialogue “ouvrir avec…”  Redirige seulement vers du contenu URI Schemes
19. Cette approche n’est pas recommandée
20. On n’a pas mieux ?! Oui oui, pas de panique ! 
21. Universal+App Links
22. Connexion de l’app avec un (ou plusieurs) site web https://www.miam.com
23. https://www.miam.com/* Ex.: https://www.miam.com/plat/tartiflette
24. Universal Links iOS 9+ App Links Android 6.0+
25. Universal Links (iOS) App Links (Android) Tap sur un lien App installée ? Lancement de l’app Envoi vers le Store Installation de l’app Suppor te l’URL ? OUI NON Affichage du contenu OUI NON Affichage du site web
26. 1/ Déclaration des urls 2/ Association de l’app et du site web 3/ Gestion des actions entrantes Configuration de l’app (iOS, Android)
27. Android <activity ...> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="http" /> <data android:scheme="https" /> <data android:host="www.miam.com" /> </intent-filter> </activity> App Links - Android
28. Android <activity ...> <intent-filter android:autoVerify="true"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="http" /> <data android:scheme="https" /> <data android:host="www.miam.com" /> </intent-filter> </activity> App Links - Android
29. Digital Asset Links https://miam.com/.well-known/assetlinks.json App Links - Android Https obligatoire Chemin fixe à la racine du site
30. Fichier vérifié à l’installation de l’app Tous les hosts déclarés doivent être valides [{ "relation": ["delegate_permission/common.handle_all_urls"], "target": { "namespace": "android_app", "package_name": "com.miam.android", "sha256_cert_fingerprints": ["14:6D:E9:83:C5:73:06:50:D8:EE:B9:95:..:1E:A8:96:B2:3F:CF:44:E5"] } }] App Links - Android $ keytool -list -v -keystore my-release-key.keystore assetlinks.json
31. Android @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); onNewIntent(getIntent()); } @Override protected void onNewIntent(Intent intent) { String action = intent.getAction(); String data = intent.getDataString(); if (Intent.ACTION_VIEW.equals(action) && data != null) { handleUrl(data); } } App Links - Android
32. applinks:www.miam.com applinks:miam.com Universal Links - iOS
33. Universal Links - iOS https://miam.com/.well-known/apple-app-site-association Https obligatoire Chemin fixe à la racine du site Type MIME application/json (sans extension .json)
34. Universal Links - iOS { "applinks": { "apps": [], "details": [ { "appID": "9JA89QQLNQ.com.miam.ios", "paths": [ "/plats/*" ] } ] } } apple-app-site-association
35. Universal Links - iOS func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([Any]?) -> Void) -> Bool { guard userActivity.activityType == NSUserActivityTypeBrowsingWeb, let url = userActivity.webpageURL else { return false } handleUrl(url) }
36.  Communication entre apps  Invite à installer l’app  Lié à 1 seule app  Redirige vers du contenu et permet de l’indexer ! Universal Links (iOS) App Links (Android)
37. Bonnes pratiques  Toujours valider l’url  Rediriger vers le web si l’url n’est pas supportée  Réfléchir au chemin de navigation du contenu  Bien valider les fichiers de configuration Universal Links (iOS) App Links (Android)
38. Validation et tests :  Universal Link Validator https://limitless-sierra-4673.herokuapp.com  Digital Asset Links Generator + Tester https://developers.google.com/digital-asset-links/tools/generator  Deep Link Testing pour Android Studio v2.x  Android Debug Bridge https://firebase.google.com/docs/app-indexing/android/test Universal Links (iOS) App Links (Android)
39. Universal Links (iOS) Avertissements :  Liens pas si universels  Incompatible avec les click trackers  Compliqué à tester (app publiée + device)  Liens désactivables par l’utilisateur
40. Deferred Deep Linking
41. Deferred Deep Linking Tap sur un lien App installée ? Lancement de l’app Envoi vers le Store Installation de l’app Suppor te l’URL ? OUI NON Affichage du contenu OUI NON Affichage du site web ?
43. Deferred Deep Linking
44. Aller plus loin !
45. Le deep linking est une FONDATION pour encore plus de joyeusetés !
46. Firebase App Indexing
47. Firebase App Indexing  App indexée dans Google Search  Compatible iOS / Android  Pertinent si contenu similaire entre web et app
48. Recherche OS  Promotion du contenu et des activités utilisateur à travers la recherche système  iOS : Spotlight, NSUserActivity  Android : Indexable
49. Smart App Banners  Disponible dans Chrome 44+ / Safari iOS 6+  Affiché quand approprié  Facile à ajouter  Limité (apparence, tracking…)
50. Et plus encore ?  Widgets  iOS Handoff  iMessage / Google Allo  Siri / Google Assistant  Bots  Android Instant Apps
51. Les liens ne sont pas exclusifs au web et permettent une meilleure exposition Ce serait dommage de s’en priver …
52. Merci ! @CYRILCATHALA