Mobile Deep Linking

Transcript

1. DEEP LINKING
   Meetup Cross-Platform Native Mobile Dev
   Cyril CATHALA
   @CyrilCathala
   

   View Slide

2. Le deep linking,
   c’est quoi ?
   

   View Slide

3. C’est une méthode pour lancer une
   app mobile native via un lien
   

   View Slide

4. Une adresse web amène
   vers une page spécifique
   

   View Slide

5. Les deep links contiennent toutes les infos pour
   amener au contenu spécifique
   d’une app mobile!
   

   View Slide

6. View Slide

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
   

   View Slide

8. L’implémentation du deep linking est
   à la charge du développeur
   

   View Slide

9. Place à
   la technique
   

   View Slide

10. URI
    Uniform Resource Identifier
    Identification d’une ressource sur le réseau
    

    View Slide

11. URL
    Uniform Resource Locator
    Adresse web
    

    View Slide

12. https://www.soat.fr/authors/cyril?rep=42
    

    View Slide

13. https://www.soat.fr/authors/cyril?rep=42
    Scheme
    Domain/Host
    Path
    Query
    

    View Slide

14. URI Schemes
    

    View Slide

15. twitter://tweet/42
    fb://profile/anne-honyme
    lafourchette://restaurant/zango75001
    

    View Slide

16. URI Schemes
    Tap sur
    un lien
    App
    installée
    ?
    Lancement de
    l’app
    Oops !
    Affichage du
    contenu
    OUI
    NON
    

    View Slide

17. 1/ Déclaration du scheme (unique)
    2/ Gestion des actions entrantes
    Configuration de l’app
    (iOS + Android)
    

    View Slide

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
    

    View Slide

19. Cette approche n’est
    pas recommandée
    

    View Slide

20. On n’a pas mieux ?!
    Oui oui, pas de panique ! 
    

    View Slide

21. Universal+App Links
    

    View Slide

22. Connexion de l’app
    avec un (ou plusieurs) site web
    https://www.miam.com
    

    View Slide

23. https://www.miam.com/*
    Ex.: https://www.miam.com/plat/tartiflette
    

    View Slide

24. Universal Links
    iOS 9+
    App Links
    Android 6.0+
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

27. Android
    
    
    
    
    
    
    
    
    
    
    App Links - Android
    

    View Slide

28. Android
    
    
    
    
    
    
    
    
    
    
    App Links - Android
    

    View Slide

29. Digital Asset Links
    https://miam.com/.well-known/assetlinks.json
    App Links - Android
    Https obligatoire Chemin fixe à la racine du site
    

    View Slide

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
    

    View Slide

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
    

    View Slide

32. applinks:www.miam.com
    applinks:miam.com
    Universal Links - iOS
    

    View Slide

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)
    

    View Slide

34. Universal Links - iOS
    {
    "applinks": {
    "apps": [],
    "details": [
    {
    "appID": "9JA89QQLNQ.com.miam.ios",
    "paths": [ "/plats/*" ]
    }
    ]
    }
    }
    apple-app-site-association
    

    View Slide

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

    View Slide

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)
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

40. Deferred Deep Linking
    

    View Slide

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
    ?
    

    View Slide

42. View Slide

43. Deferred Deep Linking
    

    View Slide

44. Aller plus loin !
    

    View Slide

45. Le deep linking est une
    FONDATION
    pour encore plus de joyeusetés !
    

    View Slide

46. Firebase App Indexing
    

    View Slide

47. Firebase App Indexing
     App indexée dans Google Search
     Compatible iOS / Android
     Pertinent si contenu similaire entre web
    et app
    

    View Slide

48. Recherche OS
     Promotion du contenu et des activités
    utilisateur à travers la recherche système
     iOS : Spotlight, NSUserActivity
     Android : Indexable
    

    View Slide

49. Smart App Banners
     Disponible dans Chrome 44+ / Safari iOS 6+
     Affiché quand approprié
     Facile à ajouter
     Limité (apparence, tracking…)
    

    View Slide

50. Et plus encore ?
     Widgets
     iOS Handoff
     iMessage / Google Allo
     Siri / Google Assistant
     Bots
     Android Instant Apps
    

    View Slide

51. Les liens ne sont pas exclusifs au web
    et permettent une
    meilleure exposition
    Ce serait dommage de s’en priver …
    

    View Slide

52. Merci !
    @CYRILCATHALA
    

    View Slide