C'est quoi une web app ?
Il y a 2 types d'applications sur iphone/ipad : les applications natives et les web apps.
L'application native est celle qui utilise les langages de programmation propres à la plateforme, que l'on achète/telecharge via l'App Store.
La web app est un site internet "déguisé" en app native, que l'on consulte une première fois avec Safari et qu'on peut garder en mémoire dans l'appareil et consulter à volonté.
Les avantages sont multiples :
- Pas besoin de connaissances supplémentaires en prog. par rapport au développement d'un site internet classique.
- Pas besoin de passer par Apple...
- Une fois gardée dans l'appareil, l'utilisateur ne voit pas la différence (icône sur le board, disponible offline, affichage en plein-ecran)
1re ETAPE : PERMETTRE LA CONSULTATION OFFLINE
C'est possible en utilisant HTML 5 et un document MANIFEST contenant la liste de fichiers du site a garder dans le cache de l'appareil.
- Changer le DOCTYPE de vos pages HTML 4 vers HTML 5 :
Code : Tout sélectionner
<!DOCTYPE html>Code : Tout sélectionner
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
Code : Tout sélectionner
index.html
images/image.jpg
...
ATTENTION il est possible que votre hosting web ne reconnaisse pas l'extention .manifest, il faut donc ajouter le type MIME text/cache-manifest .manifest a la config du serveur. (il existe plusieurs facons de faire, je ne rentrerai pas dans le detail)
ensuite il faut declarer le fichier MANIFEST dans chaque page HTML. Dans la balise <html> :
Code : Tout sélectionner
<html manifest="iphone.manifest">Code : Tout sélectionner
<!DOCTYPE html>
<html manifest="iphone.manifest">
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
...
</head>
<body onload="init()">
....
</body>
<script type="text/javascript">
// variable du cache géré par le fichier MANIFEST
var webappCache = window.applicationCache;
function init() {
// METTRE A JOUR LE CACHE SI UNE MAJ EST DISPO.
webappCache.addEventListener("updateready", updateCache, false);
// FORCER LA VISITE MEME SI LE CACHE N'A PAS PU ETRE MIS A JOUR
webappCache.addEventListener("error", initVisite, false);
webappCache.addEventListener("idle", initVisite, false);
}
function updateCache() {
// METTRE A JOUR LE CACHE
webappCache.swapCache();
// DEMANDER A L'UTILISATEUR DE RELANCER L'APP POUR VOIR LA NOUVELLE VERSION
alert("Une nouvelle version est disponible.\nVeuillez rafraîchir la page pour mettre à jour.");
}
function initVisite() {
// CODE OU COMMENCER LA VISITE ET CHARGER LE PREMIER PANO
}
</script>
</html>
2re ETAPE : CREER UN ICONE POUR LE BOARD
L'icone doit etre une image PNG avec ou sans transparence de 72px x 72px, que vous copierai a la racine du site par ex.
2 possibilités ensuite :
- laisser le board appliquer le style par defaut des icones, avec les borders arrondis et le reflet. L'icone sera declaré dans chaque fichier HTML, dans la balise <head> :
Code : Tout sélectionner
<link rel="apple-touch-icon" href="monicone.png">Code : Tout sélectionner
<link rel="apple-touch-icon-precomposed" href="monicone.png">QUOI D'AUTRE ?
Vous avez la possibilite de creer une image de chargement de l'app, ou de changer la couleur de la barre de status de l'appareil. Ces options sont detaillees dans la documentation d'apple :
http://developer.apple.com/safari/libra ... tions.html
Et voila... J'espere avoir été le plus clair possible. Merci de laisser un petit commentaire si tout ca vous a été utile.
A+ sur le forum
Je pense que j'ai voulu dire upload et non grandette.
