web-dev-qa-db-fra.com

Est-il possible d'enregistrer un schéma d'URL basé sur un domaine http + pour des applications iPhone, telles que YouTube et Maps?

J'aimerais que iOS ouvre les URL de mon domaine (par exemple, http://martijnthe.nl ) avec mon application lorsque celle-ci est installée sur le téléphone et avec Mobile Safari dans le cas contraire. ne pas.

J'ai lu qu'il est possible de créer un suffixe de protocole unique pour cela et de l'enregistrer dans Info.plist, mais Mobile Safari générera une erreur si l'application n'est pas installée.

Quelle serait une solution de contournement?

Une idée:

1) Utilisez les URL http: // qui s’ouvrent dans n’importe quel navigateur et rendez le service via le navigateur.

2) Vérifiez l'agent utilisateur et, s'il s'agit de Mobile Safari, ouvrez un myprotocol: // URL to (tentative) pour ouvrir l'application iPhone et laissez-le ouvrir iTunes mobile au téléchargement de l'application en cas d'échec de la tentative.

Vous ne savez pas si cela fonctionnera? Des suggestions? Merci!

iphoneiosurl
222
Martijn Thé

Je pense que la manière la moins intrusive de le faire est la suivante:

  1. Vérifiez si l'agent utilisateur est celui d'un iPhone/iPod Touch
  2. Rechercher un cookie appInstalled
  3. Si le cookie existe et est défini sur true, définissez window.location sur your-uri:// (ou effectuez la redirection côté serveur).
  4. Si le cookie n'existe pas, ouvrez un message "Saviez-vous que votre nom de site possède une application iPhone?" modal avec un "Oui, je l'ai déjà", "Non, j'aimerais bien l'essayer" et le bouton "Laissez-moi tranquille".
    1. Le bouton "Yep" définit le cookie sur true et redirige vers your-uri://
    2. Le bouton "Nope" redirige vers " http://iTunes.com/apps/yourappname ", ce qui ouvrira l'App Store sur l'appareil.
    3. Le bouton "Laissez-moi" permet de définir le cookie sur false et de fermer le modal

L'autre option avec laquelle j'ai joué mais que j'ai trouvé un peu maladroit était de faire ce qui suit en Javascript:

setTimeout(function() {
  window.location = "http://iTunes.com/apps/yourappname";
}, 25);

// If "custom-uri://" is registered the app will launch immediately and your
// timer won't fire. If it's not set, you'll get an ugly "Cannot Open Page"
// dialogue prior to the App Store application launching
window.location = "custom-uri://";
240
Nathan de Vries

Il est tout à fait possible de le faire en JavaScript tant que votre solution de repli est une autre application. Construire sur suggestion de Nathan :

<html>
  <head>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>

    <h2><a id="applink1" href="fb://profile/116201417">open facebook with fallback to appstore</a></h2>
    <h2><a id="applink2" href="unknown://nowhere">open unknown with fallback to appstore</a></h2>
    <p><i>Only works on iPhone!</i></p>    

  <script type="text/javascript">

// To avoid the "protocol not supported" alert, fail must open another app.
var appstorefail = "itms://iTunes.Apple.com/us/app/facebook/id284882215?mt=8&uo=6";

function applink(fail){
    return function(){
        var clickedAt = +new Date;
        // During tests on 3g/3gs this timeout fires immediately if less than 500ms.
        setTimeout(function(){
            // To avoid failing on return to MobileSafari, ensure freshness!
            if (+new Date - clickedAt < 2000){
                window.location = fail;
            }
        }, 500);    
    };
}

document.getElementById("applink1").onclick = applink(appstorefail);
document.getElementById("applink2").onclick = applink(appstorefail);

</script>
</body>
</html>

Découvrez une démo en direct ici .

95
jb.

Pour les appareils iOS 6, il existe une option: Promotion des applications avec des bannières Smart App

26
ohho

J'ai trouvé que la réponse sélectionnée fonctionnait pour les applications du navigateur, mais le code ne fonctionnait pas correctement dans les applications non du navigateur qui implémentaient un UIWebView.

Le problème pour moi était qu'un utilisateur de l'application Twitter cliquerait sur un lien qui les mènerait sur mon site via un UIWebView de l'application Twitter. Puis, quand ils ont cliqué sur un bouton de mon site, Twitter essaie d’être élégant et ne complète que le window.location si le site est accessible. Donc, ce qui se passe est un UIAlertView apparaît indiquant que vous êtes sûr de vouloir continuer, puis redirige immédiatement vers l'App Store sans une seconde fenêtre contextuelle.

Ma solution implique des iframes. Cela évite que la UIAlertView soit présentée, ce qui permet une expérience utilisateur simple et élégante.

jQuery

var redirect = function (location) {
    $('body').append($('<iframe></iframe>').attr('src', location).css({
        width: 1,
        height: 1,
        position: 'absolute',
        top: 0,
        left: 0
    }));
};

setTimeout(function () {
    redirect('http://iTunes.Apple.com/app/id');
}, 25);

redirect('custom-uri://');

Javascript

var redirect = function (location) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('src', location);
    iframe.setAttribute('width', '1px');
    iframe.setAttribute('height', '1px');
    iframe.setAttribute('position', 'absolute');
    iframe.setAttribute('top', '0');
    iframe.setAttribute('left', '0');
    document.documentElement.appendChild(iframe);
    iframe.parentNode.removeChild(iframe);
    iframe = null;
};

setTimeout(function () {
    redirect('http://iTunes.Apple.com/app/id');
}, 25);

redirect('custom-uri://');

MODIFIER:

Ajoutez une position absolue à l'iframe afin qu'il ne soit pas inséré de manière aléatoire au bas de la page.

De plus, il est important de noter que je n'ai pas trouvé nécessaire d'utiliser cette approche avec Android. Utiliser window.location.href devrait bien fonctionner.

23
cnotethegr8

Dans iOS9, Apple a enfin introduit la possibilité d'enregistrer votre application pour gérer certaines URL http://: Liens universels .

Une explication très approximative de la façon dont cela fonctionne:

  • Vous déclarez vouloir ouvrir http:// URL pour certains domaines (URL Web) dans votre application.
  • Sur le serveur des domaines spécifiés, vous devez indiquer les URL à ouvrir dans les applications ayant déclaré vouloir ouvrir les URL à partir du domaine du serveur.
  • Le service de chargement d'URL iOS vérifie toutes les tentatives d'ouverture d'URL http:// pour une configuration, comme expliqué ci-dessus, et ouvre automatiquement l'application appropriée, le cas échéant; sans passer par Safari d'abord ...

C'est le moyen le plus propre de créer des liens profonds sur iOS. Malheureusement, cela ne fonctionne qu'avec iOS9 et plus récent ...

20
severin
window.location = appurl;// fb://method/call..
!window.document.webkitHidden && setTimeout(function () {
    setTimeout(function () {
    window.location = weburl; // http://iTunes.Apple.com/..
    }, 100);
}, 600);

document.webkitHidden est de détecter si votre application est déjà appelée et l'onglet de safari en cours pour aller au fond, ce code provient de www.baidu.com

9
zyanlu

CONSTRUIRE à nouveau sur la réponse de Nathan et JB:

Comment lancer une application à partir d'une URL sans clic supplémentaire Si vous préférez une solution ne comprenant pas l'étape intermédiaire consistant à cliquer sur un lien, vous pouvez utiliser les options suivantes. Avec ce javascript, j'ai pu renvoyer un objet Httpresponse de Django/Python qui permet de lancer une application s'il est installé ou de lancer le magasin d'applications en cas d'expiration du délai. Remarque J'avais également besoin d'ajuster le délai d'expiration de 500 à 100 pour que cela fonctionne sur un iPhone 4S. Testez et ajustez-le pour qu'il corresponde à votre situation.

<html>
<head>
   <meta name="viewport" content="width=device-width" />
</head>
<body>

<script type="text/javascript">

// To avoid the "protocol not supported" alert, fail must open another app.
var appstorefail = "itms://iTunes.Apple.com/us/app/facebook/id284882215?mt=8&uo=6";

var loadedAt = +new Date;
setTimeout(
  function(){
    if (+new Date - loadedAt < 2000){
      window.location = appstorefail;
    }
  }
,100);

function LaunchApp(){
  window.open("unknown://nowhere","_self");
};
LaunchApp()
</script>
</body>
</html>
9
BFar

Si vous ajoutez un iframe sur votre page Web avec l'option src définie sur un schéma personnalisé pour votre application, iOS sera automatiquement redirigé vers cet emplacement dans l'application. Si l'application n'est pas installée, rien ne se passera. Cela vous permet d'établir un lien profond dans l'application si elle est installée ou de rediriger vers l'App Store s'il n'est pas installé.

Par exemple, si l'application Twitter est installée et que vous accédez à une page Web contenant le balisage suivant, vous serez immédiatement dirigé vers l'application.

<!DOCTYPE html>
<html>
    <head>
    <title>iOS Automatic Deep Linking</title>
    </head>
    <body>
        <iframe src="Twitter://" width="0" height="0"></iframe>
        <p>Website content.</p>
    </body>
</html>

Voici un exemple plus complet qui redirige vers l'App Store si l'application n'est pas installée:

<!DOCTYPE html>
<html>
    <head>
    <title>iOS Automatic Deep Linking</title>
    <script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
    <script src='//mobileesp.googlecode.com/svn/JavaScript/mdetect.js'></script>
    <script>
      (function ($, MobileEsp) {
        // On document ready, redirect to the App on the App store.
        $(function () {
          if (typeof MobileEsp.DetectIos !== 'undefined' && MobileEsp.DetectIos()) {
            // Add an iframe to Twitter://, and then an iframe for the app store
            // link. If the first fails to redirect to the Twitter app, the
            // second will redirect to the app on the App Store. We use jQuery
            // to add this after the document is fully loaded, so if the user
            // comes back to the browser, they see the content they expect.
            $('body').append('<iframe class="Twitter-detect" src="Twitter://" />')
              .append('<iframe class="Twitter-detect" src="itms-apps://iTunes.com/apps/Twitter" />');
          }
        });
      })(jQuery, MobileEsp);
    </script>
    <style type="text/css">
      .Twitter-detect {
        display: none;
      }
    </style>
    </head>
    <body>
    <p>Website content.</p>
    </body>
</html>
5
q0rban

Heres une solution.

Configurer une sitiation booléenne en utilisant le flou et la mise au point

//see if our window is active
window.isActive = true;
$(window).focus(function() { this.isActive = true; });
$(window).blur(function() { this.isActive = false; });

Liez votre lien avec un gestionnaire de clics jquery qui appelle quelque chose comme ceci.

function startMyApp(){
  document.location = 'fb://';

  setTimeout( function(){
    if (window.isActive) {
        document.location = 'http://facebook.com';
    }
  }, 1000);
}

si l'application s'ouvre, nous perdons notre attention sur la fenêtre et le chronomètre se termine. sinon nous n'obtenons rien et nous chargeons l'URL habituelle de facebook.

3
Dane Macaulay

Autant que je sache, vous ne pouvez pas faire comprendre à tout le système d'exploitation une adresse URL http: +. Vous pouvez uniquement enregistrer de nouveaux modèles (j'utilise x-darkslide: dans mon application). Si l'application est installée, Mobile Safari la lancera correctement.

Toutefois, vous devez gérer le cas où l'application n'est pas installée avec un "Toujours ici? Cliquez sur ce lien pour télécharger l'application à partir d'iTunes". dans votre page web.

2
Fraser Speirs

Vérifiez l'agent utilisateur et, s'il s'agit de Mobile Safari, ouvrez un myprotocole: // URL vers (tentative) pour ouvrir l'application iPhone et laissez-le ouvrir iTunes mobile au téléchargement de l'application en cas d'échec de la tentative.

Cela me semble une approche raisonnable, mais je ne pense pas que vous serez en mesure de le faire pour ouvrir iTunes mobile en tant que deuxième recours. Je pense que vous devrez choisir l'un ou l'autre - soit rediriger vers votre application ou vers iTunes.

c'est-à-dire que si vous redirigez vers myprotocol: // et que l'application n'est pas au téléphone, vous n'aurez pas une seconde chance de rediriger vers iTunes.

Vous pourriez peut-être d'abord effectuer une redirection vers une page de destination (optimisée pour l'iPhone) et donner à l'utilisateur la possibilité de cliquer sur votre application ou sur iTunes pour obtenir l'application si elle ne l'a pas? Mais vous comptez sur l'utilisateur pour faire la bonne chose ici. (Edit: bien que vous puissiez définir un cookie pour qu'il ne s'agisse que d'une première utilisation?)

0
frankodwyer

En cherchant à résoudre le problème des fenêtres contextuelles, j'ai découvert que Apple maîtrisait ce problème.

En effet, lorsque vous cliquez sur ce lien , si vous avez installé l'application, celle-ci est réacheminée; sinon, vous serez redirigé vers la page Web, sans aucune fenêtre contextuelle.

0
Titignes