Nous avons vu précédemment les nouveautés de Phonegap 3.0.

Parmi ces nouveautés: le dossier www commun à toutes les plateformes, et la possibilité de surcharger à notre guise des fichiers pour chaque plateforme.

Si on configure le DocumentRoot de son projet pour pointer vers le dossier www, on voit son application dans son navigateur. C’est plutôt pratique, mais pas suffisant pour se rapprocher vraiment de son application.

Il y a bien l’émulateur proposé par Ripple, mais je trouve qu’il est loin d’être performant, et vite dépassé dès qu’on utilise des plugins. Et pas sûr qu’il soit encore compatible avec la 3.0.

 Configurer Chrome

Grâce à la configuration de Chrome, il est possible de se rapprocher au maximum des téléphones mobiles. Il suffit d’ouvrir la barre de développement, et d’accéder au panneau de paramètres.

Dans les paramètres il faut cocher quelques cases:

• Enable, pour activer l’ensemble des modifications (c’est toujours utile).
• Définir le User Agent qu’on souhaite utiliser
• Le device metric: les dimensions de son écran. On peut voir le rendu sur différentes résolutions de cette manière. Cela permet de voir rapidement comment le contenu s’adapte en fonction des dimensions , compte tenu de toutes les résolutions d’écrans mobiles possibles.
• Emulate touch events: Le curseur de la souris est remplacé par un cercle qui équivaut à un doigt. Le navigateur répond ensuite aux évènements mobiles permettant de slider, scroller…

Chrome nous indique les modifications en cours en haut de l’écran pour rappel:

Pour conserver les paramètres il faut maintenir la fenêtre de développement ouverte, mais c’est généralement toujours le cas quand on développe.

Désormais notre application peut être développée dans le navigateur.

L’évènement deviceready est reconnu, les touche events aussi. C’est bien, mais ce n’est pas suffisant!

Gérer les plugins

De base on pourra utiliser presque toutes les fonctionnalités. Mais dès qu’on utilise un plugin, on va se retrouver avec des erreurs javascript bloquantes. Pour ça il y a une solution simple: notre www de base va indiquer que c’est un navigateur, et les plateformes vont utiliser le dossier override pour écraser cette information et dire que ce sont nos téléphones.

Par exemple dans un fichier js on mettra:

App.deviceType = DEVICE_NAVIGATOR;

et dans un fichier qui sera ajouté en plus ou remplacera celui-ci on mettra

App.deviceType = DEVICE_IOS;

Quand on utilise un plugin on peut faire un test du deviceType. Par exemple si l’application a besoin de l’uuid, au lieu d’appeler la methode:

device.uuid

On appellera une fonction à nous, par exemple:

App.getUuid = function() {
    if(App.deviceType === DEVICE_IOS)
        return App.DEFAULT_UUID; // return a default uuid to test
    return device.uuid;
};

Voilà, avec cette méthode il est possible de facilement développer une application Phonegap en utilisant son navigateur. Attention quand même à ne pas en abuser: les mobiles ont toujours des spécificités qu’on ne prévoit pas toujours, des contraintes particulières, des performances différentes de celles optenues avec le navigateur. Il faudra toujours compiler son application sur ses différents supports, mais pour les premières phase de développement et d’intégration cela permet de gagner énormément de temps de ne pas avoir à compiler à chaque modification.

Il convient ensuite de valider les développements réalisés en utilisant les supports ciblés par votre projet (et je vous rappelle l’excellent article de Mika sur le debug de vos applis Androïd depuis Chrome)