Comment vérifier si une application est installée à partir d'une page web sur un iPhone?
je veux créer une page web, une page qui va rediriger un iPhone sur l'app-store si l'iPhone n'a pas installé l'application, mais si l'iPhone a l'application installée, je le veux pour ouvrir l'application.
j'ai déjà mis en œuvre une url personnalisée dans l'application iPhone donc j'ai une url pour l'application qui est quelque chose comme:
myapp://
et si cette url n'est pas valide, je veux que la page soit redirigée vers l'application stocker. Est-ce possible?
si je n'ai pas l'application installée sur le téléphone et n'écris pas l'url myapp:// dans safari, Tout ce que je reçois est un message d'erreur.
même s'il existe un vilain piratage avec javascript que j'aimerais vraiment savoir?
10 réponses
autant que je sache, vous ne pouvez pas, à partir d'un navigateur, vérifier si une application est installée ou non.
mais vous pouvez essayer de rediriger le téléphone vers l'application, et si rien ne se produit rediriger le téléphone vers une page spécifiée, comme ceci:
setTimeout(function () { window.location = "https://itunes.apple.com/appdir"; }, 25);
window.location = "appname://";
Si la deuxième ligne de code donne un résultat, alors la première ligne n'est jamais exécutée.
Espérons que cette aide!
question similaire:
pour faire avancer la réponse acceptée, vous avez parfois besoin d'ajouter du code supplémentaire pour gérer les personnes retournant le navigateur après le lancement de l'application - que la fonction setTimeout s'exécute chaque fois qu'ils le font. Donc, je fais quelque chose comme ça:
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 100) return;
window.location = "https://itunes.apple.com/appdir";
}, 25);
window.location = "appname://";
de cette façon, s'il y a eu un gel dans l'exécution du code (c.-à-d., commutation de l'application), il ne fonctionnera pas.
iOS Safari a une fonctionnalité qui vous permet d'ajouter une bannière "smart" à votre page Web qui liera soit à votre application, si elle est installée, ou à L'App Store.
vous faites cela en ajoutant une balise meta à la page. Vous pouvez même spécifier une URL d'application détaillée si vous voulez que l'application fasse quelque chose de spécial quand elle se charge.
détails sur la page D'Apple promouvoir les applications avec des bannières D'applications intelligentes .
le mécanisme a l'avantage d'être facile et de présenter une bannière standardisée. L'inconvénient est que vous n'avez pas beaucoup de contrôle sur l'apparence ou de l'emplacement. En outre, tous les paris sont désactivés si la page est consultée dans un navigateur autre que Safari.
vous pouvez consulter ce plugin qui tente de résoudre le problème. Il est basé sur la même approche que décrite par missemisa et Alastair etc, mais utilise une iframe cachée à la place.
@Alistair a souligné dans cette réponse que parfois les utilisateurs retourneront au navigateur après l'ouverture de l'application. Un commentateur de cette réponse a indiqué que les valeurs de temps utilisées devaient être modifiées en fonction de la version iOS. Lorsque notre équipe a dû faire face à cette situation, nous avons constaté que les valeurs de temps pour le temps d'arrêt initial et de dire si nous étions revenus au navigateur devaient être ajustées, et souvent ne fonctionnaient pas pour tous les utilisateurs et les appareils.
Plutôt que d'utiliser un seuil arbitraire de différence de temps pour déterminer si nous étions retournés dans le navigateur, il était logique de détecter les événements "pageshide" et "pageshow".
j'ai développé la page web suivante pour aider à diagnostiquer ce qui se passait. Il ajoute des diagnostics HTML à mesure que les événements se déroulent, principalement parce que l'utilisation de techniques comme la journalisation de la console, les alertes, ou L'inspecteur Web, jsfiddle.net tous ont eu leurs inconvénients dans ce flux de travail. Plutôt que d'utiliser un seuil temporel, le Javascript calcule le nombre d'événements "pagehide" et "pageshow" pour voir s'ils se sont produits. Et j'ai trouvé que la stratégie la plus robuste était d'utiliser un délai initial de 1000 (plutôt que les 25, 50, ou 100 signalés/suggérés par d'autres).
cela peut être servi sur un serveur local, par exemple python -m SimpleHTTPServer et affiché sur iOS Safari.
pour jouer avec, appuyez sur les liens" ouvrir une application installée "ou" application non installée". Ces liens devraient causer respectivement L'application Maps ou L'App Store à ouvrir. Vous pouvez ensuite revenir à Safari pour voir la séquence et le calendrier des événements.
(Note: Ceci ne fonctionnera que pour le Safari. Pour les autres navigateurs (comme GoogleChrome), vous devez installer des gestionnaires pour les événements pagehide/show-equivalent).
mise à jour: comme @Mikko l'a souligné dans les commentaires, les événements pageshow/pagehide que nous utilisons ne sont apparemment plus pris en charge dans iOS8.
<html>
<head>
</head>
<body>
<a href="maps://" onclick="clickHandler()">Open an installed app</a>
<br/><br/>
<a href="xmapsx://" onclick="clickHandler()">App not installed</a>
<br/>
<script>
var hideShowCount = 0 ;
window.addEventListener("pagehide", function() {
hideShowCount++ ;
showEventTime('pagehide') ;
});
window.addEventListener("pageshow", function() {
hideShowCount++ ;
showEventTime('pageshow') ;
});
function clickHandler(){
var hideShowCountAtClick = hideShowCount ;
showEventTime('click') ;
setTimeout(function () {
showEventTime('timeout function '+(hideShowCount-hideShowCountAtClick)+' hide/show events') ;
if (hideShowCount == hideShowCountAtClick){
// app is not installed, go to App Store
window.location = 'http://itunes.apple.com/app' ;
}
}, 1000);
}
function currentTime()
{
return Date.now()/1000 ;
}
function showEventTime(event){
var time = currentTime() ;
document.body.appendChild(document.createElement('br'));
document.body.appendChild(document.createTextNode(time+' '+event));
}
</script>
</body>
</html>
à partir de 2017, il semble qu'il n'y ait aucun moyen fiable pour détecter une application est installé, et le truc de redirection ne fonctionnera pas partout.
pour ceux comme moi qui a besoin de liens profonds directement à partir d'e-mails( assez courant), il est intéressant de noter ce qui suit:
-
envoyer des e-mails avec appScheme: / / ne fonctionnera pas très bien parce que les liens seront filtrés dans Gmail
-
redirection automatiquement à appScheme: / / est bloqué par Chrome: je soupçonne que Chrome nécessite la redirection d'être synchrone à une interaction utilisateur (comme un clic)
-
vous pouvez maintenant relier deep sans appScheme:// et c'est mieux mais cela nécessite une plate-forme moderne et une configuration supplémentaire. Android iOS
il est intéressant de noter que d'autres les gens y ont déjà réfléchi en profondeur. Si vous regardez comment Slack implémente sa fonctionnalité "magic link" , vous pouvez remarquer que:
- il envoie un e-mail avec un lien http régulier (ok avec Gmail)
- la page Web a un gros bouton qui renvoie à appScheme: / / (ok with Chrome)
je dois faire quelque chose comme ça j'ai fini par aller avec la solution suivante.
j'ai une URL de site Web spécifique qui ouvrira une page avec deux boutons
1) Bouton un aller au site web
2) bouton Deux aller à l'application (iphone / téléphone android / tablette) vous pouvez revenir à un emplacement par défaut d'ici si l'application n'est pas installé (comme une autre url ou un magasin d'application)
3) cookie à rappelez-vous le choix des utilisateurs
<head>
<title>Mobile Router Example </title>
<script type="text/javascript">
function set_cookie(name,value)
{
// js code to write cookie
}
function read_cookie(name) {
// jsCode to read cookie
}
function goToApp(appLocation) {
setTimeout(function() {
window.location = appLocation;
//this is a fallback if the app is not installed. Could direct to an app store or a website telling user how to get app
}, 25);
window.location = "custom-uri://AppShouldListenForThis";
}
function goToWeb(webLocation) {
window.location = webLocation;
}
if (readCookie('appLinkIgnoreWeb') == 'true' ) {
goToWeb('http://somewebsite');
}
else if (readCookie('appLinkIgnoreApp') == 'true') {
goToApp('http://fallbackLocation');
}
</script>
</head>
<body>
<div class="iphone_table_padding">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td class="iphone_table_leftRight"> </td>
<td>
<!-- INTRO -->
<span class="iphone_copy_intro">Check out our new app or go to website</span>
</td>
<td class="iphone_table_leftRight"> </td>
</tr>
<tr>
<td class="iphone_table_leftRight"> </td>
<td>
<div class="iphone_btn_padding">
<!-- GET IPHONE APP BTN -->
<table border="0" cellspacing="0" cellpadding="0" class="iphone_btn" onclick="set_cookie('appLinkIgnoreApp',document.getElementById('chkDontShow').checked);goToApp('http://getappfallback')">
<tr>
<td class="iphone_btn_on_left"> </td>
<td class="iphone_btn_on_mid">
<span class="iphone_copy_btn">
Get The Mobile Applications
</span>
</td>
<td class="iphone_btn_on_right"> </td>
</tr>
</table>
</div>
</td>
<td class="iphone_table_leftRight"> </td>
</tr>
<tr>
<td class="iphone_table_leftRight"> </td>
<td>
<div class="iphone_btn_padding">
<table border="0" cellspacing="0" cellpadding="0" class="iphone_btn" onclick="set_cookie('appLinkIgnoreWeb',document.getElementById('chkDontShow').checked);goToWeb('http://www.website.com')">
<tr>
<td class="iphone_btn_left"> </td>
<td class="iphone_btn_mid">
<span class="iphone_copy_btn">
Visit Website.com
</span>
</td>
<td class="iphone_btn_right"> </td>
</tr>
</table>
</div>
</td>
<td class="iphone_table_leftRight"> </td>
</tr>
<tr>
<td class="iphone_table_leftRight"> </td>
<td>
<div class="iphone_chk_padding">
<!-- CHECK BOX -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="checkbox" id="chkDontShow" /></td>
<td>
<span class="iphone_copy_chk">
<label for="chkDontShow"> Don’t show this screen again.</label>
</span>
</td>
</tr>
</table>
</div>
</td>
<td class="iphone_table_leftRight"> </td>
</tr>
</table>
</div>
</body>
</html>
après avoir compilé quelques réponses, j'ai trouvé le code suivant. Ce qui m'a surpris, c'est que le minuteur ne pas geler sur un PC (Chrome, FF) ou Android Chrome - la gâchette a fonctionné en arrière-plan, et le contrôle de visibilité était la seule information fiable.
var timestamp = new Date().getTime();
var timerDelay = 5000;
var processingBuffer = 2000;
var redirect = function(url) {
//window.location = url;
log('ts: ' + timestamp + '; redirecting to: ' + url);
}
var isPageHidden = function() {
var browserSpecificProps = {hidden:1, mozHidden:1, msHidden:1, webkitHidden:1};
for (var p in browserSpecificProps) {
if(typeof document[p] !== "undefined"){
return document[p];
}
}
return false; // actually inconclusive, assuming not
}
var elapsedMoreTimeThanTimerSet = function(){
var elapsed = new Date().getTime() - timestamp;
log('elapsed: ' + elapsed);
return timerDelay + processingBuffer < elapsed;
}
var redirectToFallbackIfBrowserStillActive = function() {
var elapsedMore = elapsedMoreTimeThanTimerSet();
log('hidden:' + isPageHidden() +'; time: '+ elapsedMore);
if (isPageHidden() || elapsedMore) {
log('not redirecting');
}else{
redirect('appStoreUrl');
}
}
var log = function(msg){
document.getElementById('log').innerHTML += msg + "<br>";
}
setTimeout(redirectToFallbackIfBrowserStillActive, timerDelay);
redirect('nativeApp://');
la solution de date est beaucoup mieux que d'autres, j'ai dû augmenter le temps sur 50 comme cela ceci est un exemple de Tweeter:
//on click or your event handler..
var twMessage = "Your Message to share";
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 100) return;
var twitterUrl = "https://twitter.com/share?text="+twMessage;
window.open(twitterUrl, '_blank');
}, 50);
window.location = "twitter://post?message="+twMessage;
le seul problème sur iOS Safari Mobile est quand vous n'avez pas l'application installée sur l'appareil, et donc Safari montrer une alerte que l'autodismiss lorsque la nouvelle url est ouverte, est de toute façon une bonne solution pour le moment!
N'a pas lu tout cela, mais peut-être utiliser une iframe et ajouter la source à"mon application://whatever".
puis vérifier régulièrement sur l'intervalle fixé de la page est de 404 ou non.
vous pouvez également utiliser L'appel Ajax. Si 404 response alors app n'est pas installé.