Warry

Depuis qu’Apple a introduit l’AppStore, la plus part d’entre nous a délaissé ce qui à l’origine était le seul moyen de développer des applications pour iPhone à savoir les WebApps. Aujourd’hui, les annonces d’emplois, de projets, les éditeurs de contenus ne jurent que par Objective-C et les applications natives. Mais pour la plus part des usages, html5 et la puissance des css3 sont largement suffisants pour construire de très bonnes applications. Et si vous souhaitez quand même profiter de la publicité offerte par l’introduction de votre app sur l’AppStore, vous pouvez toujours la mettre dans une WebView et apprécier le labyrinthe de la validation d’Apple, et la joie de payer pour un iPhone developper program (99$).

Pour cette première étape, nous allons faire une rapide visite des fonctionnalités disponibles sur Webkit mobile afin de développer des WebApps qui ont tout des grandes, suivez le guide !

Les options spéciales d’HTML5

Pour gérer les relations avec le système, certains meta-tags sont indispensables :

Sur iPhone, l’ensemble du système repose sur UTF-16, donc si vous avez des versions japonaise ou arabe, pas de problème !

<meta http-equiv="Content-Type" content="text/html; charset=utf-16"/>

Ce tag permet de contraindre le zoom de votre appui. Dans l’exemple on interdit tous les zooms utilisateur :

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>

Ici on dit au système que notre application peut tourner en dehors de Safari. Lorsque l’utilisateur ajoutera votre application à sa Home il ne vera plus les barres de Safari :

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

La barre du haut est également personalisable: noir ou gris.

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Pour se la jouer encore plus application native, on peut ajouter une icône et un écran de chargement, l’URL de l’icône est même détectée sur Android !

<link rel="apple-touch-startup-image" href="/public/images/startup.png">

<link rel="apple-touch-icon-precomposed" href="/public/images/icon.png"/>

La plus part des nouveautés de HTML5 sont également prises en compte :

• Local storage, WebSQL : conservez des données même lorsque la connexion est indisponible
• Les médias vidéo et audio sont pris en charge
• Les nouvelles balises (lien)
• Canvas
• SVG natif
• La géolocalisation
• L’accès au carnet d’adresse
• Orientation verticale/horizontale
• Des protocoles spéciaux (ex: href=”tel:+3300000000”)
• Des types de formulaires dédiés (types number, email, search…)

Par contre, on ne pourra pas accéder à des couches plus basses comme l’appareil photo ou les notifications.

La puissance des CSS3

Voici une liste des nouveautés de CSS3 :

• Sélecteurs
• Dégradés
• Fonds multiples
• Border-images
• Ombres (textes et boites)
• SVG
• Masques
• Couleurs rgba
• Transitions/animations CSS

Et peut-être d’autres que j’ai oublié !

Egalement deux d’attributs très utiles pour le développement iPhone :

-webkit-tap-highlight-color: rgba(0,0,0,0)

Lorsque que vous cliquez sur un élément qui a un évènement onclick, un cadre noir apparait automatiquement, cet attribut vous permet de choisir sa couleur, et de le masquer

-webkit-user-select: none

Cet attribut permet d’empêcher l’utilisateur de sélectionner du texte (ce qui arrive tout le temps, généralement par erreur).

Mais tout n’es pas rose, nous allons encore le voir par la suite, il y a un truc très très très chiant : l’absence de l’attribut “position: fixed”. Cela veut dire qu’il n’est pas possible de placer des éléments immobiles type header ou footer comme on en trouve sur la plus part des applications. Et comme les iframes ou les boites avec “overflow: auto” ne se défilent qu’avec 2 doigts, et bien il faut chercher des solutions peu heureuses en javascript (la moins pire selon moi est iScroll).

Le Javascript

Je ne suis pas partisant de l’utilisation de jQuery sur iPhone — lourd à charger pour des petites connexion 3G — et la fonction magique querrySelectorAll nous permet de créer un mini framework en 50 lignes qui va nous permettre déjà de démarrer une application simple :

/* -----------------------------------------------
 * UNIVERSAL SELECTOR
 * -----------------------------------------------
 */
window.$ = HTMLElement.prototype.$ = function(selector, context) {
	if (selector == null)
		return null
	var context=context||this==window?document:this,results=context.querySelectorAll(selector),isId=/^\#[a-zA-Z]*$/;
	if (isId.test(selector) && results)
		return results[0]
	else
		return results
}

/* -----------------------------------------------
 * EACH FUNCTION
 * -----------------------------------------------
 */
var each = function(c) {
	for(var i=0; i<this.length; i++)
		c(this[i], i);
}
Array.prototype.each = each
NodeList.prototype.each = each

/* -----------------------------------------------
 * GET JSON
 * -----------------------------------------------
 */
var getJson = function(url, callback) {
	var url = url, callback = callback, request = new XMLHttpRequest()
	request.open("GET", url, true)
	request.addEventListener('readystatechange', function(e){
		if (this.readyState==4 && this.status=="200")
			callback(eval(this.responseXML))
	})
	request.send()
}

/* -----------------------------------------------
 * GETTER/SETTER FOR CSS
 * -----------------------------------------------
 */
var css = function(prop, value) {
	if (value)
		this.style.setProperty(prop, value)
	else
		return window.getComputedStyle(this, null)[prop]
}
HTMLElement.prototype.css = css;

L’autre gros problème sur iPhone en plus du scroll, ce sont les évènements focus/blur qui sont bridés. En effet, on ne peut pas les récupérer en dehors d’un évènement click. Cela veut dire qu’il est très complexe de pouvoir gérer l’affichage/masquage du clavier virtuel qui ne se montre que lorsqu’un champ texte est actif.

Malgré tout, ne pas avoir IE6 dans les pattes et pouvoir jouer avec html5 et css3 c’est un grand bonheur ! Il n’y a plus qu’à espérer que la Team Webkit soit à l’écoute des développeurs, deux petites limitations à corriger ce n’est pas la mer à boire !

Conclusion

Dans cet article je n’ai pas parlé de toutes options pour développer des WebApps sur iPhone. Il y a bien-sûr Dashcode, le meilleur choix si vous voulez créer une application avec le look and feel classic d’Apple. Mais il y a aussi des solution hybrides telles que Appcelerator qui permettent de créer des applications natives à l’aide de Javascript, et qui donne accès à des couches plus basses du téléphone (appareil photo, notifications).

Dans le prochain article, nous mettrons en pratique ce qui a été abordé ici avec un exemple concret. J’espère vous y retrouver !

J’en profite pour signaler aux fans de technologies pure web et javascript que ma société, Zenexity (Paris 9), recrute actuellement des développeurs pour la division iPhone, contactez-moi pour plus d’informations.

MAJ: Etape2 du tutoriel développer des webapp pour iPhone est disponible.