Comment conservez-vous une application Web iPhone / iPad en mode plein écran?

Question

J'ai un HTML5 app iPad qui fonctionne en mode hors connexion. L'application se compose essentiellement de 4 fichiers html et les 3 fichiers aspx. Mon manifeste de cache de la configuration, de sorte que seuls les fichiers html sont disponibles hors ligne, et les fichiers aspx besoin d'une connexion réseau. C'est tout ce travail formidable!

Maintenant, j'ai obtenu au point où je suis en train de mettre la touche finale sur l'application et essayer de finaliser l'écran d'accueil icônes, la course en mode plein écran, etc. J'ai ajouté ce que je crois sont les balises meta pour rendre l'application d'abord lancer en mode plein écran une fois qu'il a été ajouté à l'écran d'accueil. La raison pour laquelle je crois que les balises sont corrects, c'est que l'application (correctement) lancement et de rester en mode plein écran si je naviguer entre les pages html. Le problème que je vais avoir est d'obtenir l'application pour rester en mode plein écran lorsque l'un des serveur (aspx) liens sont cliqués.

Lorsqu'un lien de serveur (aspx) est cliqué Mobile Safari coups de pied dans la mode navigateur et ouvre une nouvelle fenêtre. Ce comportement n'est pas acceptable et je suis en espérant que je suis absent quelque chose de simple ici.

Voici les balises meta que j'utilise sur toutes mes pages (html + aspx):

  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />

J'espère que cela fournit toutes les informations nécessaires pour comprendre le problème. J'ai vu d'autres liens ici en indiquant qu'une page autre que l'un signet sur la page d'accueil causes certaines personnes à quitter le mode plein écran. Ce n'est pas le problème, je vais avoir, j'ai donc voulu commencer une nouvelle discussion. Encore une fois, j'ai l'impression que si j'avais plus de 5 pages html dans l'application, elle continuera à rester en mode plein écran. Les pages aspx sont le problème dans ma situation.

Answer 1

Laissez l'ordinateur faire le travail fastidieux, c'est pour cela qu'ils sont faits.

Ceci est un morceau de code javascript que j'utilise pour éviter de réécrire tous mes liens. Avec cela, seuls les liens qui ont un attribut explicite target = "_blank" s'ouvriront dans Safari. Tous les autres liens resteront dans l'application Web.

 var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++) {
    if(!a[i].onclick && a[i].getAttribute("target") != "_blank") {
        a[i].onclick=function() {
                window.location=this.getAttribute("href");
                return false; 
        }
    }
}
 

Answer 2

Voici un plugin jQuery qui pourrait aider: https://github.com/mrmoses/jQuery.stayInWebApp

C'est une solution javascript similaire, mais a quelques fonctionnalités supplémentaires. Par défaut, il s'attachera à tous les liens, mais vous pouvez l'utiliser pour attacher aux liens avec une certaine classe ou quelque chose. Il détecte également le mode plein écran iOS afin qu'il ne gêne pas les autres navigateurs et appareils.

Answer 3

D'après mon expérience, tout lien externe semble faire sortir l'application du mode plein écran. Une solution consiste à gérer votre navigation à l'aide de javascript et de l'objet de localisation. Comme suit:

HTML:

 <a href="javascript:navigator_Go('abc.aspx');">Go</a> 
 

Javascript:

 function navigator_Go(url) {
    window.location.assign(url); // This technique is almost exactly the same as a full <a> page refresh, but it prevents Mobile Safari from jumping out of full-screen mode
}
 

Je sais que c'est pénible de devoir retravailler vos liens de cette façon, mais c'est le seul moyen que j'ai trouvé pour résoudre le problème auquel vous êtes confronté.

Answer 4

Le problème avec la solution de KPM est qu'elle gâche tous les liens dans toutes les pages de votre application, provoquant parfois des bogues difficiles à trouver, surtout si votre application est intensive en ajax. J'ai trouvé une bien meilleure solution ici sur github.

Je reproduis le code ci-dessous pour des raisons de commodité:

 (function(document,navigator,standalone) {
            // prevents links from apps from oppening in mobile safari
            // this javascript must be the first script in your <head>
            if ((standalone in navigator) && navigator[standalone]) {
                var curnode, location=document.location, stop=/^(a|html)$/i;
                document.addEventListener('click', function(e) {
                    curnode=e.target;
                    while (!(stop).test(curnode.nodeName)) {
                        curnode=curnode.parentNode;
                    }
                    // Condidions to do this only on links to your own app
                    // if you want all links, use if('href' in curnode) instead.
                    if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) {
                        e.preventDefault();
                        location.href = curnode.href;
                    }
                },false);
            }
        })(document,window.navigator,'standalone');
 

Answer 5

La solution que j'ai réglé avec est Waypoints pour la manipulation des liens internes. Il a une méthode open() pour les liens externes qui fonctionne jusqu'à iOS 6. Après laquelle vous avez besoin de cette autre correctif pour iOS 7.

// Internal link handling
Waypoints
  .intercept('a')
  .ignore('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]');
  // .resume();

// External link handling...
$('a').on('click', function(e) {
  var href = $(this).attr('href');

  if ($(this).is('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]') || (href.indexOf('http') >= 0 && href.indexOf(document.location.host) === -1)) {
    e.preventDefault();
    var link = this;

    if (navigator.standalone) {
      if (/iP(hone|od|ad) OS 7/.test(navigator.userAgent)) {
        // iOS 7 external link polyfill
        e.stopPropagation();

        // Your custom dialog code for iOS 7 and external links
      }
      else {
        Waypoints.open(href);
      }
    }
    else {
      window.open(href);
    }
  }
});

Il y a aussi Swipy.js vous devriez vérifier, il comprend des Waypoints comme une bibliothèque et je peut comprendre toutes ce lien de la manipulation et de l'iOS 7 fix si ça vaut le coup.