• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Mobile

Développer ses applications Phonegap sur son navigateur

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. Sans titre

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…

1

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

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)

04/02/2014 25 MIN READ TAGS: Apache Cordova BY: Jonathan VALLET 0 COMMENT
SHARE
LIRE LA SUITE

Jonathan VALLET

Passionné de jeux vidéos, j'ai d'abord suivi un cursus de développeur avant de me spécialiser avec une année de Game Design. Après 2 ans et demi chez Ubisoft sur le développement de leur premier MMO par navigateur, puis quelques autres expériences, j'ai rejoint AdFab en 2013. Je m'occupe désormais du développement d'applis mobile et de sites généralement très graphiques.

Inspecter un site sur Android depuis Chrome

La théorie des six degrés de séparation

VOUS POURRIEZ AIMER

Mobile Optimisations Phonegap / Cordova

Mobile Améliorer la performance de ses applications Phonegap

Mobile Cordova et limites des web workers

Mobile Développer un plugin cordova dans les règles de l’art

Mobile Présentation de Phonegap 3.0

Mobile Phonegap: Utiliser des polices systèmes

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect