2014年11月26日水曜日

ionic frameworkのWebViewとしてCrosswalkを使う

Use Crosswalk With Ionic Framework Android Apps

ふむ。どうやらionicでもWebViewとしてCrosswalkを使えるらしい。実際にやってみよう。


Crosswalkのダウンロード

まずはこちらからCrosswalkをダウンロード。

Crosswalk - build world class hybrid apps


Canaryはちょっと怖いし、Stableはちょっと保守的過ぎるので、Betaチャンネルを選んだ。アーキテクチャは欲張らずにARMのみにした。ほとんどのAndroid機はARMだし、ARM+x86だとapkが重くなるそうなので。


追記14.12.03:Stableをダウンロードすべし。Canaryは動作せず。Beta版は動作はするがcordovaのAPIが動かないので。

Beta版で動かしたときのコンソール出力
----追記ここまで


Crosswalkの組み込み

新しくプロジェクトを作ってCrosswalkを組み込む。

$ ionic start IonicCrosswalk blank
$ cd IonicCrosswalk/
$ ionic platform add android
$ rm -rf platforms/android/CordovaLib/*
$ cp -a /Users/jun/Downloads/crosswalk-cordova-10.39.235.6-arm/framework/* platforms/android/CordovaLib/
$ cp /Users/jun/Downloads/crosswalk-cordova-10.39.235.6-arm/VERSION platforms/android/
$ cd platforms/android/CordovaLib/
$ android update project --subprojects --path . --target "android-19"
$ ant debug
$ cd ..(androidディレクトリまで戻る)
$ vi AndroidManifest.xml

WIFI_STATEとNETWORK_STATEのパーミッションを追加。

...
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name">
...

$ cd ../../(プロジェクトのルートディレクトリまで戻る)
$ ionic run android

起動した!

Chromeの chrome://inspect/#devices で見ると


とCrosswalkのWebViewを使っていることを確認できる。


便利なシェルスクリプトを使って一発組み込み

元記事のコメントにシェルスクリプトを作ってくれている人がいたので、これを使ってStableとCanaryバージョンも試してみよう。Thank you very much, Nolan Lawsonさん!

Helper script to convert an Ionic/Cordova app to a Crosswalk app

「Download Gist」からダウンロードし解凍。パスが通った適当なところにコピー。

$ cp /Users/jun/Downloads/prepare_crosswalk.sh ~/bin/
$ cd ~/bin/
$ chmod 744 prepare_crosswalk.sh

このスクリプトはarmとx86両方ともを要求するので、あらかじめ各チャンネルのarm版とx86版をダウンロードしておく。

新しくプロジェクトを作る。

$ cd /path/to/project/root
$ ionic start IonicCrosswalkStable blank
$ cd IonicCrosswalkStable
$ prepare_crosswalk.sh /Users/jun/Downloads/crosswalk-cordova-8.37.189.14-x86 /Users/jun/Downloads/crosswalk-cordova-8.37.189.14-arm

LiveReloadありで起動。

$ ionic run android --livereload

起動した。ライブリロードも確認できた。


末尾のバージョン番号が37〜になっていることに注目。

同様にCanaryもやってみたが、通常起動もライブリロード起動も、起動直後にクラッシュして起動しなかった。やっぱりCanaryはやめておいた方がいい(^^);

Anyway, thank you very much Nic Raboyさん! We did it!