web-dev-qa-db-fra.com

Comment conserver une application Web iPhone/iPad en mode plein écran?

J'ai une application HTML5 pour iPad qui fonctionne hors connexion. L'application consiste essentiellement en 4 fichiers HTML et 3 fichiers ASPX. Mon manifeste de cache est configuré pour que seuls les fichiers HTML soient disponibles hors connexion et que les fichiers aspx nécessitent une connexion réseau. Cela fonctionne très bien!

Maintenant, je suis sur le point de mettre la touche finale à l'application et d'essayer de finaliser les icônes de l'écran d'accueil, de fonctionner en mode plein écran, etc. J'ai ajouté ce que je considère être les balises méta nécessaires à Lancez initialement l'application en mode plein écran une fois qu'elle a été ajoutée à l'écran d'accueil. La raison pour laquelle je pense que les balises sont correctes est que l'application va (correctement) être lancée et rester en mode plein écran si je navigue entre les pages html. Le problème que je rencontre, c'est que l'application reste en mode plein écran lorsque l'utilisateur clique sur l'un des liens du serveur (aspx). 

Lorsque vous cliquez sur un lien de serveur (aspx), Mobile Safari passe en mode navigateur complet et ouvre une nouvelle fenêtre. Ce comportement n'est pas acceptable et j'espère que je manque 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 sur ce site indiquant que TOUTE page autre que celle marquée dans la page d'accueil provoquait la sortie de certaines personnes du mode plein écran. Ce n'est pas le problème que j'ai, alors je voulais lancer une nouvelle discussion. Encore une fois, j’ai le sentiment que si j’avais encore 5 pages HTML dans l’application, elle resterait en mode plein écran. Les pages aspx sont le problème dans ma situation.

iosiphone-standalone-web-app
32
Don

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 ayant un attribut explicite target = "_blank" s'ouvriront dans Safari. Tous les autres liens resteront à l'intérieur de 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; 
        }
    }
}
30
KPM

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

C'est une solution javascript similaire, mais qui possède quelques fonctionnalités supplémentaires. Par défaut, il sera attaché à tous les liens, mais vous pouvez l'utiliser pour lier des liens avec une certaine classe ou quelque chose. Il détecte également le mode plein écran iOS afin de ne pas gêner les autres navigateurs et périphériques.

17
mr.moses

D'après mon expérience, tout lien externe semble faire quitter l'application en 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 manière, mais c'est le seul moyen que j'ai trouvé pour résoudre le problème auquel vous êtes confronté.

8
Journeyman

Le problème avec la solution de KPM est qu'il bousille tous les liens de toutes les pages de votre application, provoquant parfois des bogues difficiles à trouver, en particulier si votre application est à forte intensité de 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');
3
Jeshurun

La solution que j'ai choisie est Waypoints pour gérer les liens internes. Il a une méthode open () pour les liens externes qui fonctionne jusqu'à iOS 6. Après quoi vous avez besoin de cet 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 inclut les points de route en tant que bibliothèque et je pourrais inclure tout ce traitement des liens et le correctif iOS 7 si ça vaut le coup. 

0
caktux

Ajouter ceci à un fichier index fera l'affaire.

 <head>
    <meta name="Apple-mobile-web-app-capable" content="yes">
    <meta name="Apple-touch-fullscreen" content="yes">
    <meta name="Apple-mobile-web-app-status-bar-style" content="black">

  <script type”javascript="" text”="">
      document.addEventListener(‘DOMContentLoaded’, function(){
         var updateStatusBar = navigator.userAgent.match(/iphone|ipad|iPod/i) && navigator.appVersion.match(/OS (\d)/) && parseInt(navigator.appVersion.match(/OS (\d)/)[1], 10) >= 7 && window.navigator.standalone;
         if (updateStatusBar) {
             document.body.classList.add(‘platform-ios’);
             document.body.classList.add(‘platform-cordova’);
         }
       });
  </script>

0
onlykalu