Créer une application web pour iPhone, 2ème partie

Voici un second article pour vous aider dans la création d’une application web sur iPhone. Cet article intervient à la suite d’une discussion avec Legarspol.
Les ligne de code suivantes ne prennent effet qu’après le lancement de Safari sur l’appareil et ce uniquement depuis un « WebClip » ou raccourci placé sur l’écran d’accueil.
Pour ajouter un site sur l’écran d’accueil, l’utilisateur doit appuyer sur le signe « + » depuis la page dans Safari et choisir « Ajouter à l’écran d’accueil ».
Pour lancer votre webapp sans les barres d’adresse (en haut) et d’outils (en bas) ajoutez la balise méta dans le HEAD :
<meta name="apple-mobile-web-app-capable"
content="yes" />

Pour changer la couleur de la barre d’état ( horloge…) :
<meta name="apple-mobile-web-app-status-bar-style"
content="black" />

Valeurs possibles pour content : default (grise), black (noire) ou black-translucent (transparente avec le début de votre contenu en dessous).
Ajouter une image de lancement :
<link rel="apple-touch-startup-image"
href="/startup.png">

Dimensions : 320 par 460 pixels, orientation portrait.

Bonne continuation sur vos projets et n’hésitez pas à poster un lien pour nous le montrer !

Auteur: Benoit DELDICQUE

Actuellement en poste sur Strasbourg, je suis en charge de la conception et la réalisation d'applications iOS pour iPhone, iPad et iPod touch.

Articles similaires

17 commentaires

  1. J’arrive au bout de ma webapplication (www.moneyli.fr via un iPhone) en m’étant notamment servi des astuces ici présentées, image d’accueil, barre d’état optimisée pour apporter une finition supérieure.
    A noter néanmoins qu’à l’heure actuelle de l’iOS 4.0.1, le paramètre ‘apple-mobile-web-app-capable’ empêche l’affichage de l’icône sur l’accueil en haute définition avec l’écran Retina, une version 59px bridée apparaît.

  2. Bonjour,
    le fichier d’icône pour l’écran d’accueil doit être un carré de 114 pixels.
    Il devrait alors s’afficher sur plus nettement sur votre Retina Display.

    Cdlt,

  3. Bonjour benoit , je voudrai creer une application du meme styke que « pokedex » .jai dit du meme style Rien avoir Avec Pokémon .première question : ca coûte de largent ? Parce que je le fait pour mon plaisir et 2: à tu un tuto stp ?sinon merci pour ton tuto !au faire mon byte ces que je suis dans un jeu et je voudrais creer Ine application genre une encyclopedie de tout les objet et 2eme onglet pour les information des personnage illustree et quon pourrait trouver les objet avec un module de recherche .je choisis une application car je veut que sa soit offline mais si je bout que ces trop dure je le ferais en web

  4. j’ai développé une application oscommerce reprenant la base de donnée et la plupart des fichers images du site http://www.aerobache.com et en adaptant toutes les pages php
    je l’ai fait en 495px de large car je ne peux vraiment pas le faire plus étroit à cause des tailles d’images en ligne (bien que souvent j’indique une talile d’affichage plus petite pour que ça s’intègre).
    Pouvez vous le tester et me dire comment il sort sur les différents supporst (ça va sur mon mobile nokia) ipad, ipod, iphone et auttres.
    par la m^^eme occasion quelqu’un a-t-il les différentes dimensions d’affichage en px des différentsI mobiles
    merci d’avance
    Fran

  5. bonsoir,
    impossible pour moi de lancer ma webapp sans les barres d’adresse (en haut) et d’outils (en bas)
    j’ai portant ajouté dans le head :

    j’ai un iphone4.. C’est lié ?

  6. bonjour benoit,
    le scrollTo est bien placer dans mon body, le script « lancer votre webapp sans les barres d’adresse (en haut) et d’outils (en bas) ajoutez la balise » marche cas moitier car j’arrive a cacher la barre du haut mais pas la barre du bas en plus je doit avoir un page obligatoirement plud grand que l’ecran sinon cela ne cache pas. Et les script « changer la couleur de la barre d’état (horloge…) » et « Ajouter une image de lancement » je marche pas du tous.
    Je n’arrive pas du tous a comprendre pourquoi, je suis sur iphone 4 avec le tous dernier OS. Pourrais tu nous crée des scripts « complet » qui marche pour que l’on s’en base à type d’exemple ou de base pour nos projet webapp ?
    Merci d’avance benoit
    Yann

  7. Bonjour Yann,

    Pour masquer la barre d’outils en bas et changer la couleur de la barre de statut (horloge), il faut lancer votre page web en mode « webapp ».
    Pour cela, il faut obligatoirement passer par l’ajout d’un webclip sur l’écran d’accueil (dashboard) en utilisant le bouton central dans Safari.
    C’est seulement à partir de ce webclip sur votre écran d’accueil que la « webapp » se lancera avec les paramètres de couleur pour la barre du haut et la barre du bas masquée.

    Cordialement,
    BENOIT

  8. Bonjour benoit,
    Le problème c’est que c’est déjà le cas, j’ai ajouté en page d’accueil c’était la 1er chose que j’ai fait pour mon application.
    Yann

  9. Yann,
    Si la webapp ne fonctionne pas, le problème doit survenir du code utilisé. Safari mobile est très sensible aux erreurs de syntaxe comme des guillemets oubliés. Je vous recommande de bien vérifier vos codes et de consulter la documentation fournie par Apple (Safari Dev Center).

    Bonne continuation. BENOIT

  10. Bonjour.

    Merci pour vos tutos.
    Je cherche le moyens de conserver ma webapp dans mon iPad en mode avion, comment faire, car j’ai créer un fichier manifest, j’ai ajouté ma page à mon écran d’accueil, et ça fonctionne bien pendant quelques minutes en mode avion, mais lorsque je quitte puis relance ma webapp, j’obtiens un message d’erreur qui m’indique que je n’ai plus de connexion internet et donc impossible de voir ma webapp.
    Merci pour votre aide.

  11. Bonjour Julien,
    il existe plusieurs techniques pour pour réaliser une application web qui fonctionne hors-ligne.
    La méthodologie ainsi que son utilisation sont décrites sur le site W3C dans une version non publiée (draft).

    Afin de vérifier la bonne utilisation de ces informations, avez-vous une page que je puisse consulter ?
    Bien à vous. Benoit