{"id":85,"date":"2014-11-14T14:08:47","date_gmt":"2014-11-14T13:08:47","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=85"},"modified":"2014-12-31T14:02:10","modified_gmt":"2014-12-31T13:02:10","slug":"remplacer-la-webview-android-par-crosswalk-chromium-sur-une-application-cordova","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/remplacer-la-webview-android-par-crosswalk-chromium-sur-une-application-cordova\/","title":{"rendered":"Remplacer la webview Android par Crosswalk (chromium) sur une application Cordova"},"content":{"rendered":"<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/11\/cw-app-icon.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-87\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/11\/cw-app-icon.png\" alt=\"cw-app-icon\" width=\"100\" height=\"100\" \/><\/a><\/p>\n<p>Chaque nouvelle version d&#8217;Android apporte une nouvelle version de sa webview (composant qui permet d\u2019ex\u00e9cuter des pages web au sein d&#8217;une application).<br \/>\nEt une version diff\u00e9rente \u00e0 chaque fois sous-entend :<\/p>\n<ul>\n<li>Des API Javascript support\u00e9es diff\u00e9rentes<\/li>\n<li>Des propri\u00e9t\u00e9s et syntaxe CSS diff\u00e9rentes<\/li>\n<li>Un rendu de votre applications diff\u00e9rent<\/li>\n<\/ul>\n<p>Et encore plein d&#8217;autres diff\u00e9rences et probl\u00e8mes.<br \/>\nSi vous voulez supporter le maximum de version d&#8217;Android, \u00e7a devient vite une gal\u00e8re pas possible pour ajuster votre application \u00e0 toutes les versions.<\/p>\n<p>Il y a pour \u00e7a une meilleure solution : <strong>Crosswalk<\/strong>.<\/p>\n<p><!--more--><\/p>\n<h3>Mais que fait Crosswalk exactement?<\/h3>\n<p>Crosswalk int\u00e8gre dans votre application la derni\u00e8re version de Google Chromium \u00e0 la place de la webview standard.<br \/>\nA gr\u00e2ce \u00e0 cette astuce, vous pouvez :<\/p>\n<ul>\n<li>D\u00e9velopper sans vous soucier du t\u00e9l\u00e9phone qui ouvrira l&#8217;application et de sa version d&#8217;android int\u00e9gr\u00e9e.<\/li>\n<li>Offrir une meilleure exp\u00e9rience utilisateur sur tous les mobiles Android 4.0+<\/li>\n<li>Debuguer facilement vos applications via DevTools de chrome<\/li>\n<li>Am\u00e9liorer les performances de votre HTML, CSS et Javascript<\/li>\n<\/ul>\n<h3>Comment l&#8217;utiliser?<\/h3>\n<p>Tout d&#8217;abord il \u00a0faut t\u00e9l\u00e9charger la version de Crosswalk correspondant \u00e0 votre syst\u00e8me d&#8217;exploitation \u00e0 l&#8217;adresse suivante :\u00a0<a href=\"https:\/\/crosswalk-project.org\/documentation\/downloads.html\">https:\/\/crosswalk-project.org\/documentation\/downloads.html<\/a><\/p>\n<p>Pour votre projet Cordova, prenez la derni\u00e8re version stable &#8220;Cordova Android (ARM)&#8221;.<\/p>\n<p>Puis d\u00e9zippez le fichier t\u00e9l\u00e9charg\u00e9.<\/p>\n<h4>Si vous commencez un nouveau projet (sinon passez \u00e0 l&#8217;\u00e9tape suivante) :<\/h4>\n<p>Dans un premier temps il vous faut cr\u00e9er votre projet Cordova<\/p>\n<pre lang=\"bash\">$ cordova create DOSSIER fr.domaine.app \"Le nom de mon application\"\r\n<\/pre>\n<p>Il est ensuite n\u00e9cessaire de se placer dans le dossier cr\u00e9\u00e9 et ajouter la plateforme &#8220;android&#8221; puis builder l&#8217;application.<\/p>\n<pre lang=\"bash\">$ cordova platform add android\r\n$ cordova build android\r\n<\/pre>\n<p>Je vous conseille de tester que l&#8217;application se lance bien avant de vouloir ins\u00e9rer Crosswalk \u00e0 votre projet.<\/p>\n<pre lang=\"bash\">$ cordova run android\r\n<\/pre>\n<h4>Si vous voulez utiliser Crosswalk dans un projet existant (ou si vous venez de le cr\u00e9er):<\/h4>\n<p>Il va maintenant falloir migrer la webView standard de votre projet vers la webView mise \u00e0 disposition par Crosswalk.<\/p>\n<p>Pour cela plusieurs \u00e9tapes sont n\u00e9cessaires :<\/p>\n<ul>\n<li>Se placer dans le r\u00e9pertoire de votre application<\/li>\n<\/ul>\n<pre lang=\"bash\">$ cd \"r\u00e9pertoire de mon application\"\r\n<\/pre>\n<ul>\n<li>Supprimer le contenu du repertoire &#8220;platforms\/android\/cordovalib&#8221;<\/li>\n<\/ul>\n<pre lang=\"bash\">$ rm -Rf platforms\/android\/CordovaLib\/*\r\n<\/pre>\n<ul>\n<li>Coller dans le r\u00e9pertoire\u00a0&#8220;platforms\/android\/cordovalib&#8221; le contenu du r\u00e9pertoire &#8220;crosswalk-cordova-version.arm\/framework&#8221; du zip crosswalk t\u00e9l\u00e9charg\u00e9.<\/li>\n<\/ul>\n<pre lang=\"bash\">$ cp -a \/framework\/* \\ platforms\/android\/CordovaLib\/\r\n<\/pre>\n<ul>\n<li>Coller dans &#8220;platforms\/android\/&#8221; le fichier &#8220;VERSION&#8221; de crosswalk<\/li>\n<\/ul>\n<pre lang=\"bash\">$ cp -a \/VERSION platforms\/android\/\r\n<\/pre>\n<ul>\n<li>Dans votre fichier &#8220;AndroidManifest.xml (qui doit se trouver dans &#8220;platforms\/android\/AndroidManifest.xml&#8221;), ajouter les lignes suivantes :<\/li>\n<\/ul>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;uses-permission android:name=&quot;android.permission.ACCESS_WIFI_STATE&quot; \/&gt;\r\n&lt;uses-permission android:name=&quot;android.permission.ACCESS_NETWORK_STATE&quot; \/&gt;\r\n<\/pre>\n<ul>\n<li>Puis ensuite builder le projet dans l&#8217;ordre suivant :<\/li>\n<\/ul>\n<pre lang=\"bash\">$ cd platforms\/android\/CordovaLib\/\r\n$ android update project --subprojects --path . --target \"android-19\"\r\n$ cd xwalk_core_library\r\n$ ant debug\r\n$ cd ..\r\n$ ant debug\r\n<\/pre>\n<p>&#8220;android-19&#8221; correspond \u00e0 la version de l&#8217;API android install\u00e9e que vous souhaitez utiliser.<br \/>\nSi vous n&#8217;avez qu&#8217;une seule version install\u00e9e ce param\u00e8tre n&#8217;est pas utile.<\/p>\n<p>Et voila, votre projet int\u00e8gre maintenant la webView Chromium mise \u00e0 disposition par CrossWalk !<\/p>\n<p>Attention cependant, si vous utilisez un outils (par exemple Grunt) qui nettoie le r\u00e9pertoire Cordova \u00e0 chaque build, il vous faudra refaire cette manipulation \u00e0 chaque fois (ou param\u00e9trer votre outils pour qu&#8217;il le fasse \u00e0 votre place).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chaque nouvelle version d&#8217;Android apporte une nouvelle version de sa webview (composant qui permet d\u2019ex\u00e9cuter des pages web au sein d&#8217;une application). Et une version diff\u00e9rente \u00e0 chaque fois sous-entend : Des API Javascript support\u00e9es diff\u00e9rentes Des propri\u00e9t\u00e9s et syntaxe CSS diff\u00e9rentes Un rendu de votre applications diff\u00e9rent Et encore plein d&#8217;autres diff\u00e9rences et probl\u00e8mes. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/lalloue.fr\/blog\/remplacer-la-webview-android-par-crosswalk-chromium-sur-une-application-cordova\/\" class=\"more-link\">Continuer la lecture <span class=\"screen-reader-text\"> \u00ab\u00a0Remplacer la webview Android par Crosswalk (chromium) sur une application Cordova\u00a0\u00bb<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14,15],"tags":[25,24],"_links":{"self":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/85"}],"collection":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/comments?post=85"}],"version-history":[{"count":23,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/85\/revisions"}],"predecessor-version":[{"id":215,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/85\/revisions\/215"}],"wp:attachment":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/media?parent=85"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/categories?post=85"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/tags?post=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}