Impossible de faire fonctionner les nouveaux AppLinks sur iOS ou Android

Question

Dernière mise à jour ci-dessous à la mise à jour n°5

J'essaie de mettre en œuvre AppLinks pour mes deux applications iOS et Android : http://applinks.org

J'ai fait ce qui suit :

1. créer un schéma d'url personnalisé pour mon application : inacho://
2. Configuré dans mon App Delegate : - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation

3. Ajouter des balises méta à mon site web à http://www.nachorater.com :

   <meta property="al:ios:app_store_id" content="581815579"/> <meta property="al:ios:app_name" content="iNacho" /> <meta property="al:ios:url" content="inacho://default" />

J'ai vérifié que le schéma d'url fonctionne bien en tapant un lien comme inacho://default dans Notes et en cliquant sur le lien créé. Wa-la ! Mon application s'ouvre.

Mais lorsque j'essaie de cliquer sur un lien vers www.nachorater.com à partir de Facebook ou de Quip, aucune des deux applications ne semble tenir compte du fait que le site dispose de ces liens d'application et se contente de charger le site web dans leur(s) navigateur(s) au lieu d'essayer d'ouvrir mon application.

Quelqu'un a-t-il réussi à le faire fonctionner ?

Mise à jour :

J'ai eu un problème avec certaines balises méta qui n'étaient pas dans la partie < head > de mes modèles et je l'ai corrigé.

Maintenant le lien : http://www.nachorater.com à partir de l'application iOS Facebook ajoute une jolie petite fenêtre qui vous permet d'ouvrir l'URL dans l'application iNacho comme suit :

Mais les liens vers mes critiques dynamiques ne semblent pas fonctionner, alors que l'application de débogage signalée par Ming montre que les balises méta sont correctes pour ces liens.

Par exemple, http://www.nachorater.com/getReview?reviewID=6396169718595584

lors du débogage avec https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.nachorater.com%2FgetReview%3FreviewID%3D6396169718595584 :

Mise à jour n°2 :

J'ai publié un lien vers une nouvelle critique de nachos sur ma timeline Facebook iNacho, puis j'ai essayé de cliquer dessus depuis l'application Facebook Mobile.

Il a commencé à charger la page et a fait apparaître l'indicateur pratique qui vous permet d'ouvrir l'application dans iNacho, mais une fois la page chargée, l'indicateur a disparu (avant que je puisse cliquer dessus).

Mise à jour n°3 :

A partir de l'application Facebook, je peux maintenant déclencher une URL inacho pour mes critiques MAIS c'est SEULEMENT si je clique sur la petite popup pour ouvrir dans iNacho avant qu'elle ne disparaisse. Si je laisse la page se charger complètement dans la vue web intégrée de Facebook, le petit popup disparaît toujours.

Est-ce un problème avec les Applinks ? Ou un problème avec l'application Facebook ? Ou est-ce un problème de conception et pourquoi ?

Mise à jour n°4 :

Je sais peut-être quel est le problème. La page de critique charge à son tour une image dynamique pour la critique des nachos. Ainsi, en chargeant la page, il y a une balise img src qui pointe vers une url dynamique qui charge l'image. Est-ce que cela est confondu avec une action de "redirection" de quelque sorte ?

Exemple de balise img (rendu) : <img width="300" src="/getReviewImage?imageID=6125868501958656"></img>

Note : Il y a un tas d'autres scripts/ajax qui sont chargés dynamiquement aussi (widgets Facebook et twitter et autres).

S'agit-il d'un bogue dans AppLinks ou dans l'application Facebook Mobile ? Ne devrait-il pas se désintéresser des objets à chargement en arrière-plan comme ajax et les images dynamiques ?

Mise à jour n°5

15/07/14 - Cela se produit toujours avec la dernière application Facebook. Lorsque je clique sur un lien de ma page Facebook iNacho vers mon site Web iNacho, l'option d'ouverture dans l'application s'affiche pendant une fraction de seconde avant que la page ne finisse de se charger. Puis elle la cache.

Quant à l'application twitter, elle ne me donne même pas la popup pendant une fraction de seconde. Elle ne semble pas reconnaître que le lien est activé par l'appslink.

Quip, par contre, j'ai collé un lien nacho et la première fois que j'ai cliqué dessus, il s'est dirigé vers son safari intégré sans possibilité d'ouverture dans mon application. MAIS la deuxième fois que j'ai cliqué dessus, il a ouvert directement mon application à la place.

Résumé : Jusqu'à présent, il semble que certaines applications n'implémentent pas correctement la partie navigation des AppLinks. Quip semble fonctionner, mais même l'application de Facebook semble ne pas fonctionner.

Answer 1

J'avais le même problème avec les AppLinks et j'ai décidé de les abandonner complètement et d'utiliser l'hôte de liens d'applications de Facebook : https://developers.facebook.com/docs/applinks/hosting-api

Mon application n'est vraiment que mobile, et j'ai mal compris le fonctionnement d'AppLinks au début. Je pensais que je pouvais simplement mettre le al_ios_* métabalises sur une page web unique et universelle, mais c'est une erreur. Il faudrait une page distincte pour chaque élément de contenu de mon site, et chacune de ces pages devrait avoir ses propres méta-tags AppLinks pour renvoyer l'URL de ce contenu spécifique vers mon application.

Lorsque je ne m'y prenais pas bien, lorsque je tapais sur mon histoire OpenGraph dans Facebook, mon site s'ouvrait dans le navigateur web et il y avait une icône d'action dans la barre d'outils inférieure sur laquelle je pouvais cliquer pour ouvrir mon application. Ou alors, je devais toucher avec précision le nom de mon application dans l'histoire OpenGraph. Dans les deux cas, j'accède rapidement à mon application, mais l'URL n'est pas spécifique au contenu vers lequel je veux que mon application navigue. De plus, ces deux options sont nulles. Je veux juste pouvoir toucher n'importe où dans l'article et accéder directement à mon application, ce qui est la raison pour laquelle nous sommes tous ici.

La solution

Je vais utiliser une histoire OpenGraph avec le dialogue de partage comme exemple.

Tout d'abord, vous devez créer un lien vers une application hébergée. sur votre serveur, pas dans l'application. Avant de créer votre histoire OpenGraph ou tout ce qui est partagé, faites un appel à votre serveur pour accomplir 2 choses :

1.) Faites un appel à l'API pour créer un nouveau lien vers l'application Facebook, qui vous donnera un identifiant.

2.) Utilisez cet identifiant pour effectuer un deuxième appel API afin d'obtenir l'URL du lien de votre application hébergée.

Cela doit être fait sur le serveur car ces appels d'API requièrent un nom de fichier accès à l'application et non un jeton d'accès utilisateur. Ce jeton a des autorisations au niveau de l'application, pas au niveau de l'utilisateur. Vous ne pouvez pas et ne devez pas stocker le secret de votre application Facebook n'importe où dans votre application mobile, car quelqu'un pourrait décompiler votre application et apporter des modifications à votre application Facebook. Ce n'est pas bon. Utilisez votre serveur car il peut connaître le secret de votre application en toute sécurité.

Mon serveur est en PHP, voici donc un exemple de la façon de procéder. Traiter avec l'API n'a pas été une expérience particulièrement agréable, je vais donc partager dans l'espoir que cela aide quelqu'un d'autre à formater les demandes :

# create a new facebook app link using cURL
$metadata = <what to handle in AppDelegate application:openURL:sourceApplication:annotation>;
$url = "https://graph.facebook.com/v2.1/app/app_link_hosts";
$ch = curl_init($url);

# create form post data
$deepLinkURL = "<myApp>://" . $metadata;
$iosArray = json_encode(array(array("url"          => $deepLinkURL,
                                    "app_store_id" => <appStoreId (number)>,
                                    "app_name"     => "<myAppName>")
                              )
                       );
$webFallbackArray = json_encode(array("should_fallback" => false));

$formQuery = http_build_query(array("access_token" => "<appId>|<appSecret>",
                                    "name"         => $metadata,
                                    "ios"          => $iosArray,
                                    "web"          => $webFallbackArray)
                              );

# options
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $formQuery);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

# get response
$responseJson = curl_exec($ch);
curl_close($ch);

# decode response from facebook
$jsonResponse = json_decode($responseJson, true);
$appLinkId = "";

# get appLinkId
foreach ($jsonResponse as $key => $val) {

    # get status
    if($key == "id") {
        $appLinkId = $val;
    }
}

# if response is good, need to request canonical URL from appLinkId
$errorMessage = "";
$canonicalUrl = "";

if(!empty($appLinkId)) {

    # create another instance of cURL to get the appLink object from facebook using the ID generated by the previous post request
    $getAppLinkUrl = "https://graph.facebook.com/" . $appLinkId;
    $ch2 = curl_init();

    # cURL options
    $queryString = http_build_query(array("access_token" => "<appId>|<appSecret>",
                                          "fields"       => "canonical_url",
                                          "pretty"       => true)
                                    );
    curl_setopt($ch2, CURLOPT_URL, $getAppLinkUrl . "?" . $queryString);
    curl_setopt($ch2, CURLOPT_RETURNTRANSFER, true);

    # get response
    $urlResponseJson = curl_exec($ch2);
    curl_close($ch2);

    # decode response from facebook
    $urlJsonResponse = json_decode($urlResponseJson, true);

    # parse response to get canonical URL
    foreach ($urlJsonResponse as $key => $val) {
        # get canonical URL
        if($key == "canonical_url") {
            $canonicalUrl = $val;
        }
    }

    # check for result
    if(empty($canonicalUrl)) {
        $errorMessage = "Unable to retreive URL.";
    }

} else {
    $errorMessage = "Unable to publish appLink.";
}

# encode response back to your app
if(empty($errorMessage)) {
    $response = json_encode(array("result"        => "success",
                                  "canonical_url" => $canonicalUrl));
} else {
    $response = json_encode(array("result" => "failed",
                                  "errorMessage" => $errorMessage));
}

#send response back to your app

De retour dans votre application, une fois que vous avez confirmé une bonne réponse, mettez l'URL canonique que vous obtenez en tant que url dans [FBGraphObject openGraphObjectForPostWithType: ci-dessous. Désormais, lorsque vous cliquerez sur votre histoire dans l'application Facebook, elle ira directement dans votre application. Pas de bêtises sur le web.

// Create an action
id<FBOpenGraphAction> action = (id<FBOpenGraphAction>)[FBGraphObject graphObject];

// Create an object
id<FBGraphObject> object;

// set shareDialog parameters
FBOpenGraphActionParams *params = [[FBOpenGraphActionParams alloc] init];
params.action = action;
params.actionType = @"<myApp>:<myAction>";
params.previewPropertyName = @"<key>";
object = [FBGraphObject openGraphObjectForPostWithType:@"<myApp>:<myObject>"
                                                 title:<title>
                                                 image:<urlToPic>
                                                   url:<fb.me/xyz canonical URL>
                                           description:<someDescription>];

[action setObject:object forKey:@"<key>"];

etc...

Answer 2

Désolé si ma réponse ne correspond pas exactement à ce que vous attendez, mais je voulais juste partager ce que nous avons fait sur nos sites Web et nos applications.

Par exemple, je sais que nous avons dû ajouter des balises supplémentaires pour que le système fonctionne avec les cartes twitter et voici la liste des propriétés méta que nous avons dans nos pages :

meta property="twitter:card" content=""
meta property="twitter:title" content=""
meta property="twitter:description" content=""
meta property="twitter:image:src" content=""
meta property="twitter:app:id:iphone" content=""
meta property="twitter:app:name:iphone" content="Marmiton"
meta property="twitter:app:url:iphone" content=""
meta property="twitter:app:id:googleplay" content=""
meta property="twitter:app:name:googleplay" content=""
meta property="twitter:app:url:googleplay" content=""

et la metha que vous avez aussi :

meta property="al:iphone:app_store_id" content=""
meta property="al:iphone:app_name" content=""
meta property="al:iphone:url" content=""
meta property="al:android:package" content=""
meta property="al:android:app_name" content=""
meta property="al:android:url" content=""

nous avons également défini la méta facebook opengraph comme fb:app_id. Je mentionne cela parce que lorsque vous recevez le lien profond dans votre application, vous avez également l'identifiant de l'application Facebook dans le lien des applaudissements.

Et d'après ce que nous avons testé :

• facebook n'ouvre pas directement le lien profond sur iOS alors qu'Android vous donne le choix de l'application. Parfois, le lien s'affiche dans la fenêtre popup bleue en bas de l'écran et parfois, un lien est ajouté dans la feuille d'actions que vous avez lorsque vous appuyez sur le bouton de partage dans la vue web de facebook (safari) (uniquement au premier chargement) -> cette présentation du lien dépend de la façon dont le contenu a été partagé sur facebook.

• twitter ajoute un lien vers l'application à l'intérieur de la carte sur iOS.

Je ne sais pas ce que je peux ajouter de plus.

J'espère que cela vous aidera un peu.