Remplacer la webview Android par Crosswalk (chromium) sur une application Cordova

cw-app-icon

Chaque nouvelle version d’Android apporte une nouvelle version de sa webview (composant qui permet d’exécuter des pages web au sein d’une application).
Et une version différente à chaque fois sous-entend :

  • Des API Javascript supportées différentes
  • Des propriétés et syntaxe CSS différentes
  • Un rendu de votre applications différent

Et encore plein d’autres différences et problèmes.
Si vous voulez supporter le maximum de version d’Android, ça devient vite une galère pas possible pour ajuster votre application à toutes les versions.

Il y a pour ça une meilleure solution : Crosswalk.

Mais que fait Crosswalk exactement?

Crosswalk intègre dans votre application la dernière version de Google Chromium à la place de la webview standard.
A grâce à cette astuce, vous pouvez :

  • Développer sans vous soucier du téléphone qui ouvrira l’application et de sa version d’android intégrée.
  • Offrir une meilleure expérience utilisateur sur tous les mobiles Android 4.0+
  • Debuguer facilement vos applications via DevTools de chrome
  • Améliorer les performances de votre HTML, CSS et Javascript

Comment l’utiliser?

Tout d’abord il  faut télécharger la version de Crosswalk correspondant à votre système d’exploitation à l’adresse suivante : https://crosswalk-project.org/documentation/downloads.html

Pour votre projet Cordova, prenez la dernière version stable “Cordova Android (ARM)”.

Puis dézippez le fichier téléchargé.

Si vous commencez un nouveau projet (sinon passez à l’étape suivante) :

Dans un premier temps il vous faut créer votre projet Cordova

$ cordova create DOSSIER fr.domaine.app "Le nom de mon application"

Il est ensuite nécessaire de se placer dans le dossier créé et ajouter la plateforme “android” puis builder l’application.

$ cordova platform add android
$ cordova build android

Je vous conseille de tester que l’application se lance bien avant de vouloir insérer Crosswalk à votre projet.

$ cordova run android

Si vous voulez utiliser Crosswalk dans un projet existant (ou si vous venez de le créer):

Il va maintenant falloir migrer la webView standard de votre projet vers la webView mise à disposition par Crosswalk.

Pour cela plusieurs étapes sont nécessaires :

  • Se placer dans le répertoire de votre application
$ cd "répertoire de mon application"
  • Supprimer le contenu du repertoire “platforms/android/cordovalib”
$ rm -Rf platforms/android/CordovaLib/*
  • Coller dans le répertoire “platforms/android/cordovalib” le contenu du répertoire “crosswalk-cordova-version.arm/framework” du zip crosswalk téléchargé.
$ cp -a /framework/* \ platforms/android/CordovaLib/
  • Coller dans “platforms/android/” le fichier “VERSION” de crosswalk
$ cp -a /VERSION platforms/android/
  • Dans votre fichier “AndroidManifest.xml (qui doit se trouver dans “platforms/android/AndroidManifest.xml”), ajouter les lignes suivantes :
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  • Puis ensuite builder le projet dans l’ordre suivant :
$ cd platforms/android/CordovaLib/
$ android update project --subprojects --path . --target "android-19"
$ cd xwalk_core_library
$ ant debug
$ cd ..
$ ant debug

“android-19” correspond à la version de l’API android installée que vous souhaitez utiliser.
Si vous n’avez qu’une seule version installée ce paramètre n’est pas utile.

Et voila, votre projet intègre maintenant la webView Chromium mise à disposition par CrossWalk !

Attention cependant, si vous utilisez un outils (par exemple Grunt) qui nettoie le répertoire Cordova à chaque build, il vous faudra refaire cette manipulation à chaque fois (ou paramétrer votre outils pour qu’il le fasse à votre place).

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Prouve moi que tu es bien humain ->