Je profite d’une petite découverte pour blogger un peu (je suis à fond sur le développement de ma première webapp full HTML qui donne de très bons résultats, j’espère pouvoir plus en parler bientôt sur ce blog).

Les applications sous forme de site web tournant dans le navigateur (alias webapp) occupent une place réduite, à cause de la place prise par l’interface du navigateur elle-même (barre d’adresse, signets, …). Sous iOS, on peut faire mieux en ajoutant l’application à l’écran d’accueil. Dans ce mode « standalone » (repéré par window.navigator.standalone), seule le header principal de l’iDevice (avec heure, batterie, signal, …) apparaît, ce qui laisse toute la place à l’application.

Pour cela, il faut tout de même placer un meta-tag dans le head de sa page:

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

Bref, vous savez déjà que cela est possible mais peut-être que vos utilisateurs ne le savent pas. Pour cela, Mattea Spinelli (qui a aussi fait iScroll) a créé un petit script nommé « Add to home ». Celui-ci vous permet de proposer automatiquement aux utilisateurs iOS d’ajouter l’application à l’écran d’accueil:

http://cubiq.org/add-to-home-screen

Lors de la consultation de la page, ce script fera apparaître un pop-up comme ceci:

Si vous naviguez sur maps.google.fr avec Safari, vous verrez que GMaps vous propose aussi cette option, un peu de la même manière.

Le script gère automatiquement le positionnement de la pop-up, suivant l’appareil (en haut à gauche pour l’iPad, en bas au centre pour l’iPhone / iPad touch. En plus de cela, pas mal d’options:

• Timing de l’apparition
• Effet de l’apparition
• Gestion de la persistance
• Contenu personnalisé …

A noter, l’option « returningVisitor » qui permet si activée, de ne proposer la pop-up qu’à la seconde visite de l’utilisateur. En effet, comme il l’indique dans l’article, si vous lui présentez cette option à la première consultation de votre site, l’utilisateur va peut-être directement fermer cette aide, car il ne sait pas encore si votre webapp vaut le coup :). De base, cette propriété est à false, ce qui signifie que l’utilisateur verra la pop-up même à sa première visite. A vous de voir.

Pour l’utiliser sur sa webapp, il suffit d’intégrer le JS et le CSS de Add2Home dans sa page, le script s’occupe du reste.

Voilà, un script très pratique qui m’a personnellement sauvé quelques heures. Si c’est aussi votre cas, faîtes aussi un don Paypal à l’auteur :)