Mobile Safari Page décharger/cacher/flouter pour Deep Linking

Je suis à la recherche d'un événement sur mobile safari qui permettra de détecter quand la page a été cachée en raison d'une redirection. Je veux ouvrir mon application directement si un utilisateur l'a installé, puis essayer facebook s'il est installé, et sinon, allez sur la page web pour cet identifiant.Mobile Safari Page décharger/cacher/flouter pour Deep Linking

Si 'myapp' est installé, alors myapp est ouvert. Mais l'onglet safari est toujours redirigé vers facebook.com
Si 'myapp' n'est pas installé, mais facebook est, alors facebook ios app est ouvert. Mais l'onglet safari se toujours redirigés vers facebook.com

J'ai créé un test link avec le HTML/JS suivant:

<!DOCTYPE html> 
    <html> 
    <head> 
      <title>Redirect Test</title> 
      <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script> 
      <meta name='viewport' content='initial-scale = 1.0,maximum-scale = 1.0' /> 
    </head> 
    <body> 
    <button>Open Oreo</button> 
    <script type='text/javascript'> 
    jQuery(function(){ 
      jQuery('button').on('click', function(){ 
        var myid = null, fbid = null; 

        // Watch for page leave to kill timers 
        jQuery(window).on('pagehide pageshow blur unload', function(){ 
          if (myid) { 
            clearTimeout(myid); 
          } 
          if (fbid) { 
            clearTimeout(fbid); 
          } 
        }); 

        window.location = "myapp://fbprofile/oreo"; 
        var myid = setTimeout(function(){ 

          // My app doesn't exist on device, open facebook 
          window.location = "fb://profile/oreo"; 
          fbid = setTimeout(function(){ 

            // Facebook doesn't exist on device, open facebook mobile 
            window.location = "https://www.facebook.com/oreo"; 
          }, 100); 
        }, 100); 
      }); 
    }); 
    </script> 
    </body> 
    </html>

Source

2013-02-05 Corey Hart

Code Nice.
EDIT: (suggestion supprimée sur l'ajout return false;)

Essayez de régler un contrôle au sein de vos fonctions setTimeout au lieu de juste compensation des délais d'attente. (Je trouve que la compensation est beaucoup plus efficace pour les intervalles au lieu de simples appels setTimeout à 1 temps). Aussi, je vérifierais pour m'assurer que l'utilisateur n'est pas sur un navigateur de bureau avant d'essayer un protocole d'application native comme mon app:// ou fb:// car ces navigateurs essaieront de suivre cet emplacement et finiront par afficher une erreur.

Essayez:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Redirect Test</title> 
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script> 
    <meta name='viewport' content='initial-scale = 1.0,maximum-scale = 1.0' /> 
</head> 
<body> 
<button>Open Oreo</button> 
<script type='text/javascript'> 
var mobileExp = /android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile|o2|opera mini|palm(os)?|plucker|pocket|pre\/|psp|smartphone|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce; (iemobile|ppc)|xiino/i; 

jQuery(function(){ 
    jQuery('button').on('click', function(){ 

     // Don't give desktop browsers a chance to fail on a nativeapp:// protocol 
     if(!mobileExp.test(navigator.userAgent)) { 
      window.location = "https://www.facebook.com/oreo"; 
      return; 
     } 

     var clicked = +new Date, timeout = 100; 

     window.location = "myapp://fbprofile/oreo"; 

     setTimeout(function(){ 
      // If we're still here after a (timeout), try native facebook app 
      if (+new Date - clicked < timeout*2){ 
       console.log('clicked '+ (+new Date - clicked) +' ago- go to FB'); 
       window.location = "fb://profile/oreo"; 
      } else { 
       console.log('too late for facebook'); 
      } 
      setTimeout(function(){ 
       // If we're still here after another (timeout), try facebook web app 
       if (+new Date - clicked < timeout*2){ 
        console.log('clicked '+ (+new Date - clicked) +' ago- go to browser'); 
        window.location = "https://www.facebook.com/oreo"; 
       } else { 
        console.log('too late for browser'); 
       } 
      }, timeout); 
     }, timeout); 
    }); 
}); 
</script> 
</body> 
</html>

Bien sûr, Décommentez les journaux de la console et faire quelques expériences avec la valeur de timeout. Ce code exact a été testé avec succès dans IOS 6.1 Safari et Safari 6.0.2 Mac. J'espère que cela aide!

Source

2013-02-07 12:49:49 goddogsrunning

Merci pour le conseil! Malheureusement cela ne s'applique pas car j'utilise un bouton et redirige avec javascript, plutôt qu'un lien. Il n'y a donc pas d'événement "bulle de liens" à annuler. –

Vous avez raison - j'ai tiré de la hanche et a raté ce fait entièrement! La suggestion au sujet des contrôles de navigateur se tient, cependant. Voir ma réponse éditée ci-dessus - déplacé les contrôles pertinents dans les fonctions 'setTimeout' et se débarrasser de la' clearTimeout's. – goddogsrunning

Safari rouvre la dernière page visitée une fois redémarrée et le script ne fonctionnera pas dans ce cas. Afin d'éviter ce comportement, vous pouvez ajouter 'window.close();' aux blocs 'else'. – ruphus

Mobile Safari Page décharger/cacher/flouter pour Deep Linking

Répondre

Questions connexes