Standalone et meta tag "web-app-capable" : RÉSOLU.

Bonjour à toutes et à tous,

Avant d'en arriver au but de ce post, je tenais tout de même à vous souhaiter une belle et heureuse année 2012. J'espère qu'elle vous apportera la réalisation de vos projets.

Cela étant dit, désolé de "gâcher la fête" comme on dit, j'ai une vraie incompréhension, totale, un vrai problème, avec le méta-tag pour iPhone :
<meta name="apple-mobile-web-app-capable" content="yes">
et je m'arrache les cheveux dessus depuis plusieurs jours en parcourant le web en vain de long en large.

Pour que tout le monde comprenne, je prends tout depuis le début :
ce meta tag est sensé proposer le plein-écran de nos sites web en leur donnant la configuration d'un application iPhone et non d'un site (pour faire court), et ce, à partir du moment où on les ouvre depuis un webclip (raccourci-écran) sur l'accueil de l'iPhone. (Il faut donc en créer un, le mettre dans son répertoire ad hoc dans l'arborescence du site, et faire le lien depuis le Head de chaque page via le "apple-touch-icon". Le bouton "ajouter à l'écran d'accueil" du menu déroulant de Safari fait le reste en faisant apparaître le pictogramme sur son écran).

Si l'on s'en tient à la page qu'ouvre le webclip directement (généralement la page d'accueil des sites), en effet, ça marche : la page s'ouvre, débarrassée de toute interface : aucune barre d'adresse ni de navigation en haut et en bas de l'écran. Oui.

MAIS LE PROBLÈME est que dès que l'on clique sur un des liens de cette page, pour accéder à une autre dans le site, elle disparaît au fond de l'écran de l'iPhone, au profit d'une nouvelle page Safari qui glisse et s'ouvre au 1er plan pour s'afficher cernée par l'interface de Safari... On se croirait dans la situation d'un téléchargement depuis l'app-store... Bref, on quitte automatiquement le mode plein-écran pour retrouver celui du surf habituel traditonnel sur un site web : dans Safari avec toute son interface... Seule donc la page d'accueil est en mode "FullScreen".

Je précise quand même que j'ai implanté tous les mata-tags "apple-mobile-web-app-capable" dans tous les Heads de toutes les pages de mon site en version iPhone.

De guerre lasse, je me suis rabattu sur un Javascript pour au moins faire disparaître la barre d'adresse de Safari (barre supérieure). il m'a débarrassé effectivement de cette partie de l'interface du navigateur dans tout le site. Mais impossible donc de masquer la barre de navigation inférieure de la sorte. D'où mon besoin de faire fonctionner le meta tag...

A quoi sert donc ce meta-tag s'il n'est capable d'ouvrir qu'une seule page de site en plein-écran? Y aurait-il quelqu'un ici qui saurait comment le faire fonctionner? Quelqu'un aurait-il des infos sur le sujet? J'ai cherché vraiment partout sur le web. Beaucoup de choses en anglais, indigestes ou incompréhensibles et de toutes façons souvent partielles... Qu'est-ce-que je n'ai pas compris ? Ai-je oublié quelque chose ? Et si oui, quoi?

Par avance, et quelque soient les réponses (du moment qu'elles sont avisées et constructives...), merci à toutes et à tous.
Bien cordialement,
Neum
Modifié par Neum (14 Apr 2012 - 12:47)

Hum... Est-ce que tes pages sont liés entre elle via des liens relatifs ou absolus ? (ça n'a peut-être rien à voir, mais c'est la première chose qui me vient en tête)

a écrit :
De guerre lasse, je me suis rabattu sur un Javascript pour au moins faire disparaître la barre d'adresse de Safari (barre supérieure). il m'a débarrassé effectivement de cette partie de l'interface du navigateur dans tout le site. Mais impossible donc de masquer la barre de navigation inférieure de la sorte. D'où mon besoin de faire fonctionner le meta tag...

Attention toutefois à ces solutions, ce que j'ai pu voir généralement en script qui effectue un scroll sur la page. Et au final, cela devient souvent plus désagréable qu'utile puisque si on commence à descendre la page avant que le script ait été entièrement loadé (puisqu'on voudra nécessairement rendre les script asynchrome pour la performance), on sera ramené au haut de l'écran à chaque fois... Et ce sera vraiment agaçant - et encore plus sur les non-iphones.

Cela dit, si tu as une solution satisfaisante, je serais bien curieux de la tester !

Bonjour,

et merci de venir participer au topic.

Pour vous répondre, le javascript régissant le désormais célèbre "Scroll to" masquant la barre d'adresse de Safari (barre supérieure) sur un site web iPhone, est tout ce qu'il y a de commun désormais.

Pour autant, oui, attention cela étant : beaucoup de pseudos solutions pour enclencher ce "scroll to" mais au final, il est très difficile de trouver un vrai code pérenne en la matière, qui prend justement en compte l'ensemble des paramètres dont il faut tenir compte pour cette technique. J'ai mis beaucoup de temps dans des recherches, des bidouillages personnels et des recherches multiples en ligne pour opter pour le bon script. Il ne vous étonnera donc pas d'apprendre que j'ai dû écumer des forums et des sites majoritairement américains pour ce faire...

Pour ce qui est des pages partiellement chargées ou trop longues à l'être, contraignant la page à re-scroller, il s'agit d'avantage d'un problème de poids de pages, de codes inhérents à la page, qu'au Javascript du scroll. Dans mon cas, les pages sont le plus ergonomiques possibles et surtout sont toutes en PHP, donc en dynamique. Autrement dit : le langage côté "serveur" me permet de les faire assembler à la volée à chaque appel de l'internaute pour les lui donner complètes à l'affichage, sans que son matériel en soit chargé. Bon, certes, puisqu'on parle iPhone, iDevices, etc..., même le langage serveur a ses limites, ne fusse déjà qu'à cause d'une simple connexion 3G... Mais enfin bon, ça limite au maximum les "dégâts" de chargement si je puis dire, et donc les problèmes du Javascript "Scroll to".
Quoiqu'il en soit, et à défaut d'autre chose d'opérationnel, j'opte sans souci pour cette solution.

Voilà, vous savez tout! Merci de votre intervention et bien cordialement
Neum

... je vois...

J'ai trouvé la solution. Pleine et entière. 100% opérationnelle sur ios3, 4 et 5.

Et comme je dois faire court et ne surtout pas t'indisposer, je m'arrêterais là.

Ça va mieux comme ça?

Bonjour,

et d'emblée, mes excuses pour le retard de réponse : je n'étais pas là ni dispo... Bref.

1) Premier point qu'il est bon de rappeler : le mode standalone ne fonctionne qu'à partir du moment où vous avez un webclip du site sur l'écran d'accueil de votre iPhone. C'est en cliquant dessus, à l'image d'une picto d'application mobile, que vous ouvrez votre site en standalone. Il vous faut donc en créer un et insérer son lien dans tous les Heads de vos pages. Votre image doit nécessairement être en PNG, faire 60x60px de dimensions et être inséré au premier niveau de l'arborescence de votre site, c'est à dire avec vos pages web.
Et inutile de vous échiner à créer des coins arrondis, pas plus que de chercher à vouloir retranscrire l'effet "Glossy" de Mac OSX : tous ces effets se font automatiquement à l'insertion du webclip sur l'écran d'accueil de votre mobile.

<link rel="apple-touch-icon" href="monimagedewebclip.png"/>

2) Ensuite, il faut aussi initialiser le mode standalone :

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

3) Enfin, il faut insérer le Javascript dans toutes vos pages :
Le mode standalone pour iphone est un simple bloc Javascript, À METTRE DANS TOUS LES HEADS DE TOUTES LES PAGES DE VOTRE SITE, ET EN TOUT PREMIER (sinon il ne fonctionnera pas). Faute de quoi en arrivant sur une page sans le javascript, vous quitterez le standalone pour ouvrir le site directement dans Safari (l'effet est un slide de fenêtres, à l'image de ce qui se passe lorsqu'on télécharge une application sur l'iPhone). Donc, mettez bien le bloc dans tous les heads et à la toute première place.

Testé et installé sur plusieurs sites, sous isOS3, 4 et 5 : 100% opérationnel.

Voici le code :

<script type="text/javascript">
(function(document,navigator,standalone) {
if ((standalone in navigator) && navigator[standalone]) {  [#darkred]=>sécurité du  forum : écrire simplement [b]standalone[/b] ENTRE CROCHETS, sans aucune autre syntaxe et en minuscules[/#]
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;
}
if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) {
e.preventDefault();
location.href = curnode.href;
}
},false);
}
})(document,window.navigator,'standalone');
</script>

4) Attention cela dit, un bémol, très regrettable : le code fonctionne si bien qu'il invalide les scripts de lightbox, au sens ou si votre/vos image(s) s'ouvre(nt) bien, elle(s) ne s'affiche(nt) plus dans la lightbox, mais à la place de la page où vous étiez. Or, ne disposant plus de l'interface iphone de navigation, pas plus que de vos propres liens de sites, vous ne pouvez plus revenir en arrière... Il faut donc quitter le mode standalone et recliquer sur le webclip pour réouvrir le site en standalone...
Je cherche toujours la solution à ce problème... Si quelqu'un a une idée, merci de venir compléter ce topic.

Bon usage du javascript et cordialement,
Neum

P.S. : Pour philight971 : Vaxilart n'a pas été "sec" : c'est juste un pauvre gars...
Modifié par Neum (16 Apr 2012 - 11:49)