web-dev-qa-db-fra.com

Comment ouvrir une application iOS native à partir d'une application Web

Résumé J'ai une application avec un schéma d'URL fonctionnant correctement que j'aimerais lancer à partir d'une application Web stockée sur l'écran d'accueil. Les méthodes de redirection JavaScript normales ne semblent pas fonctionner.

Détails J'essaie de créer une application Web iOS pour pouvoir l'ouvrir en mode plein écran à partir d'un lien enregistré sur l'écran d'accueil. L'application Web doit ouvrir une application native spécifique. J'ai déjà enregistré le schéma d'URL pour l'application native et vérifié son bon fonctionnement. Je peux ouvrir l'application native en le saisissant directement dans la barre d'adresse Safari, par exemple. Je peux également l'ouvrir à partir d'autres applications à l'aide de la méthode +openURL: de UIApplication. Je voudrais également l'ouvrir avec certains arguments d'une application Web native pouvant être ajoutés à l'écran d'accueil.

Ce que j'essaie de faire, c'est d'utiliser JavaScript comme si dans l'application native:

window.location = "myapp://myparam";

Lorsque j'utilise ce code dans l'application Web, je reçois une alerte disant:

"Ne peut pas ouvrir monWebAppName - monWebAppName n'a pas pu être ouvert. L'erreur Était" Cette URL ne peut pas être affichée ".".

Ce même javascript, lorsqu'il est exécuté dans Safari, fonctionne correctement. J'obtiens le même résultat en utilisant window.location.replace("myapp://myparam").

Le code HTML pour l'application Web est:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <meta name="author" content="Carl Veazey">
    <!-- Date: 2012-04-19 -->
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <meta name="Apple-mobile-web-app-capable" content="yes" />
    <meta names="Apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
<body>
    <script type="text/javascript" charset="utf-8">
        if (window.navigator.userAgent.indexOf('iPhone') != -1) {
            if (window.navigator.standalone == true) {
                window.location = "myapp://myparam";
            } else {
                document.write("please save this to your home screen");
        };} else {
                alert("Not iPhone!");
                document.location.href = 'please-open-from-an-iphone.html';
        };
    </script>
</body>
</html>

Qu'est-ce que je fais mal ici? Javascript et le Web mobile étant assez peu expérimentés, je soupçonne qu'il me manque quelque chose d'évident.

javascriptiosmobile-safari
28
Carl Veazey

Votre code fonctionne si c'est dans un safari mobile, mais PAS si c'est à partir d'un signet sur le bureau iOS. Je n'ai jamais essayé de cette façon auparavant, mais c'est le problème. Si je viens de configurer votre JS à 

<script type="text/javascript" charset="utf-8"> 
window.location = "myapp://myparam";
</script>

Cela fonctionne dans le navigateur, mais il échoue lorsqu'il est mis en favori. Il se peut qu’il doive faire quelque chose avec la façon dont l’url est chargée lorsqu’il est marqué, car il n’ya pas de chrome? À mon avis, Apple ne veut pas que les pages de marque réservées accèdent aux applications locales. De plus, j'ai remarqué que si je marque une page hébergée localement, qui fonctionne dans un safari mobile, je ne peux pas la charger via un marque-page. C'est vraiment étrange ....

La meilleure recommandation que j'ai pour vous est de le faire 

<meta name="Apple-mobile-web-app-capable" />

au lieu de 

<meta name="Apple-mobile-web-app-capable" content="yes" />

De cette façon, il sera sur l'écran d'accueil, mais sera malheureusement chargé avec le chrome. C’est la seule solution à laquelle je puisse penser.

13
AJak

Si vous devez ouvrir une application iOS si elle est installée et que vous souhaitez également préserver la fonctionnalité de votre page, le location.href = 'myapp://?params=...'; ne vous aidera pas, car si myapp:// n'est pas enregistré, la redirection mène l'utilisateur à une destination inaccessible.

Le pari le plus sûr semble consister à utiliser un iframe. Le code suivant ouvrira une application iOS si elle est installée et ne causera pas d'échec si ce n'est pas le cas (bien qu'il puisse alerter un utilisateur que la page n'a pas pu être atteinte si l'application n'est pas installée):

var frame = document.createElement('iframe');
frame.src = 'myapp://?params=...';
frame.style.display = 'none';
document.body.appendChild(frame);

// the following is optional, just to avoid an unnecessary iframe on the page
setTimeout(function() { document.body.removeChild(frame); }, 4);
8
Andrew Sklyarevsky

Essayez comme ceci : La page d'index

<html><head></head><body>
<?php
$app_url = urlencode('YourApp://profile/blabla');
$full_url = urlencode('http://yoursite.com/profile/bla');
?>   

<iframe src="receiver.php?mylink1=<?php echo $app_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>
<iframe src="receiver.php?mylink2=<?php echo $full_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>

</body>
</html>

le receiver.php page:

<?php if ($first == $_GET['mylink1'])) { ?>
   <script type="text/javascript">
   self.window.location = "<?php echo $first;?>"; 
   </script>

<?php } if ($second == $_GET['mylink2'])) { ?>
   <script type="text/javascript">
   window.parent.location.href = "<?php echo $second ;?>"; 
   //window.top.location.href=theLocation;
   //window.top.location.replace(theLocation);
   </script>
<?php } ?>
0
T.Todua