• Création d'applications PhoneGap avec jQuery Mobile
• $.support.cors
• $.mobile.allowCrossDomainPages
• PhoneGap liste blanche
• Toujours des problèmes ?

Création d'applications PhoneGap avec jQuery Mobile

PhoneGap est une plateforme pour applications HTML5 qui permet aux développeurs de concevoir des applications natives avec les technologies web et donne accès aux APIs et magasins d'applications. Les applications sont construites comme des pages HTML normales et emballées pour fonctionner comme une application native avec UIWebView ou WebView (un navigateur chromeless, dénommé ci-après ). Puisque PhoneGap est fréquemment utilisée conjointement avec jQuery Mobile, nous voulions vous offrir quelques conseils et recommandations pour vous aider à démarer.

Le document de demande initiale est chargé par l'application PhoneGap par une URL de type file://local. Cela signifie que si vous voulez extraire dans les pages du serveur distant de votre entreprise (téléphone domicile) vous devrez vous référer à eux avec des URL absolues à votre serveur. Parce que votre document provient d'une URL de type file://, le chargement de pages ou d'actifs depuis votre serveur distant est considéré comme une requête inter-domaines qui peut être bloquée dans certains scénarios.

Votre capacité d'accéder aux pages interdomaine à partir d'une application Phone Gap jQuery Mobile est contrôlé par deux éléments clés : $.support.cors et $.mobile.allowCrossDomainPages, et peut également être influencé par la fonctionnalité de liste blanche dans les versions ultérieures de PhoneGap.

$.support.cors

Dans le noyau de jQuery, il y a un booléen $.support.cors qui indique si oui ou non jQuery pense que le navigateur supporte la fonctionnalite W3C "Cross-Origin Resource Sharing" pour supporter les requêtes cross-domaines.

Étant donné que jQuery Mobile s'appuie sur les fonctionnalités $.ajax() du noyau jQuery, $.support.cors doit être défini sur true pour dire à $.ajax de charger les pages cross-domaines. Nous avons entendu dire que WebViews sur certaines plateformes, comme BlackBerry, supporte le chargement cross-domaines, mais que le noyau jQuery définit incorrectement la valeur de $.support.cors sur false qui désactive les requêtes $.ajax() cross-domain et conduirait à l'échec du chargement de la page ou de l'actif.

$.mobile.allowCrossDomainPages

Lorsque jQuery Mobile tente de charger une page externe, la requête s'exécute par le biais de $.mobile.loadPage(). Cela permettra uniquement les requêtes inter-domaines si l'option de configuration $.mobile.allowCrossDomainPages est définie sur true. Parce que le framework jQuery Mobile piste quelle page est actuellement visualisée dans le hachage location du navigateur, il est possible de réaliser une attaque de type cross-site scripting (XSS) si le code XSS en question peut manipuler le hachage et lui affecter une URL cross-domaines de son choix. Ceci est la raison peincipale pour laquelle le réglage par défaut de $.mobile.allowCrossDomainPages est défini sur false.

Ainsi dans les applications PhoneGap qui doivent "phone home" en chargeant des actifs hors d'un serveur distant, $.support.cors ET $.mobile.allowCrossDomainPages doivent être définis sur true. L'option $.mobile.allowCrossDomainPages doit être définie avant que toute requête cross-domaines soit faite aussi nous vous recommandons de l'envelopper dans un gestionnaire d'événements mobileinit :

$( document ).bind( "mobileinit", function() {
	/**
	 * Indiquez ici vos changements de configuration du framework jQuery Mobile
	 */
	
	$.mobile.allowCrossDomainPages = true;
});

PhoneGap liste blanche

PhoneGap 1.0 a introduit l'idée d'une liste blanche de serveurs que son WebView interne est autorisé à faires des requêtes cross-domaines. Vous pouvez trouver des infos à ce sujet ici sur le PhoneGap wiki :

Cependant, toutes les plateformes ne supportent pas cette fonctionnalité liste blanche, aussi vérifiez dans la documentation PhoneGap pour plus de détails. Les versions plus anciennes de PhoneGap avant la 1.0 permettent par défaut des requêtes cross-domaines vers n'importe quel seveur.

Toujours des problèmes ?

Voici quelques conseils supplémentaires qui ne sont pas spécifiquement liés à PhoneGap, mais qui sont bons à connaître :

Nous vous recommandons de désactiver la fonctionnalité pushState pour les applications installées car il ya des cas ou cette fonctionnalité peut provoquer un comportement inattendu lors de la navigation et depuis que les URL ne sont plus visibles dans WebView, il ne faut pas le garder actif dans ces situations.

Android applique un timeout lors du chargement des URL dans une WebView qui peuvent être trop courts pour vos besoins. Vous pouvez modifier ce délai timeout en éditant une classe Java générée par le plugin Eclipse pour Android :

super.setIntegerProperty("loadUrlTimeoutValue", 60000);