Cordova

Motivation

Permettre l'accès à des fonctionnalités mobiles natives depuis une application Web (HTML + CSS + Javascript) plus portable.

Analyse

Fournit des APIs supplémentaires permettant d'accèder aux fonctionnalités natives d'une plate-forme mobile, telles que :

OSS

Conception

  1. Intégrer un navigateur chromeless dans une application native
  2. Créer un "pont" (bridge) ce navigateur et le code natif
  3. Ecrire une webapp
  4. Packager la webapp dans le code natif et déployer sur les plates-formes natives (même packaging/distribution via un store que des autres applications natives).

Remote debugging

Extensibilité (plates-formes ou extensions de plates-formes)

Implémentation

Cycle de développement

  • N'importe quel IDE
    • Android 4.0 (API Level 15)
  • Emulateurs de plate-forme ou émulateur Ripple
  • Web Inspector Remote (Weinre) / Srsly utilise Weinre
  • A défaut du reste, Console.log et alert

Performance

  • Utiliser des transformations CSS3 au lieu de fixer des propriétés CSS dans une boucle Javascript

Exemples

Code

<!doctype html<br> > <html><br> <head><br> <meta name=<span class="codeString">"viewport"</span> content=<span class="codeString">"<strong>width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;</strong>"</span>/><br>    <link rel=<span class="codeString">"stylesheet"</span> media=<span class="codeString">"<strong>all and (max-device-width: 480px)</strong>" </span>href=<span class="codeString">"iphone.css"</span>><br>   <link rel=<span class="codeString">"stylesheet"</span> media=<span class="codeString">"<strong>all and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait)</strong>"</span> href=<span class="codeString">"ipad-portrait.css"</span>><br>   <link rel=<span class="codeString">"stylesheet"</span> media=<span class="codeString">"<strong>all and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)</strong>"</span> href=<span class="codeString">"ipad-landscape.css"</span>><br>    <script src=<span class="codeString">"phonegap-0.9.4.js"</span>></script><br>    <script><br>       document.addEventListener(<span class="codeString">‘deviceready’</span>,function(){<br>          alert(<span class="codeString">‘Hello!’</span>);<br>      }, false); Performance•UsethoseCSStransforms•Don’tsetstylepropertiesinsidealoop•Don’tdowhatyoudoontheweb <br>    </script> <br> </head><br> <body><br>    <button>Je suis dans une appli native !</button><br> </body><br> </html>

Applications

Parmi les applications mobiles développée avec Cordova ou PhoneGap s1"Apps Created with PhoneGap", PhoneGap on trouve :

Déploiement

Plate-forme Navigateur chromeless Version Pont web-natif
du web de le natif du natif vers le web
iOS (iPad, iPod Touch, iPhone) Webkit (UIWebView) au choix :
  • écriture dans une iframe, lue et exécutée par le natif
  • requête XHR à une URL interceptée
 stringByEvaluatingJavaScriptFromString
Android WebKit (WebView) 2.1 (API level 7) au choix :
  • onJSPrompt
  • JS_Object
  • location URL change
au choix :
  • polling du natif par le web (toutes les 50 ms, suboptimal)
  • HANGING_GET : un serveur interne répond à des requêtes XHR du web
  • Reflexivité Java sur la WebView (Android 3.2+)
RIM pour Blackberry (smartphones, Playbook)
Windows Phone
HP/Palm WebOS
Bada
Symbian

Notes