CordovaでCrossWalkを使う。(AjaxをAndroid4.X使う

CordovaでCrossWalkを使います。目的としては、XMLHTTPrequest(Ajaxを用いた機能)をAndroid4.1~4.3で使いたかったという話です。

CordovaでAndroidアプリを作成する際にCordova5.X.Xでは「APILevel14〜23(Android4.0〜6.0)のアプリを生成できる」(参照: Android Platform Guide – Apache Cordova)
とあります。

確かに、上記のバージョンに対応したパッケージを生成できるのですが、アプリのユーザーから「読み込み画面から進めない」との報告を複数受けてなにかおかしいと思いました。

最初はパーミッションやJava自体のバージョンを疑ったのですが、いろいろなバージョンのシミュレータで試したりしているうちに、ネットワークのアクセス関連に問題があると特定しました。

 

はじめに

ここからダラダラこの結論にいたるまでの経緯を書きますが、やり方だけ見たい方はページ中央程まで飛んでください。

導入までジャンプ

CrosWalk?

CrossWalkとは、Intelとかが開発しているWebViewです。(公式サイト: Crosswalk – build world class hybrid apps)

通常のHTML5/JSで作成するハイブリッドアプリはWebView(ブラウザに対応する部分?)にOS標準のブラウザを利用します。それに対し、CrossWalkはブラウザに対応する部分までアプリ自身に含みます。

サポートされる端末はAndroid4.0以降に限定され、またWebViewを内包するためアプリサイズがふえてしまいますが、ブラウザの違いによるAPIの違いの影響を受けにくい事や、パフォーマンスが向上しているらしいです。

参考: Crosswalkを使うとどれくらいパフォーマンスがアップするかテストしてみました : アシアルブログ

 

なんでCrossWalk使うの?

CrossWalkを使わない場合では、OS標準のブラウザがWebViewとして利用されるます。そして、Android4.3以下と4.4以上では、ブラウザの仕様が変わり”Content-Security-Policy(CSP)”をmetaタグで指定が必要になったりとなんやかんや変更が合ったらしいです。(適当ですみません

そのなんやかんやで、今までアプリから外部のサイトにアクセスするために利用していたcordova-plugin-whitelistの挙動が怪しい感じがします。Githubの方にもそれなりに開発が行われていて、まだ安定していないのかな〜なんて印象を受けました。
[Github: apache/cordova-plugin-whitelist: Mirror of Apache Cordova plugin whitelist]

最初はwhitelistだけでなんとかしようとmetaタグによるCSPの設定やconfig.xmlに記載するアクセスの許可設定など頑張っていたのですが、結局CrossWalkを使う方法が一番簡単だと思います。

Major Changes in Apache Cordova 5 & 6こちらのサイトの中央より少し上に

You may wish to use the Crosswalk WebView plugin when targeting earlier versions of Android as CSP support was not introduced until Android 4.4. See the section on Crosswalk later in this article for additional tips on using Crosswalk.

と書かれています。「4.4までとそれからじゃことなるからどっちもいけるアプリ作るんならCrosswalkを使ったら良いんじゃね」みたいなニュアンスだと思います。

CrossWalkにすると何が変わるのか?

結論: 何も変わった気がしない

CrossWalkとは何かにゴニョゴニョ書きましたが、実際に普通につかっているとあまり今までと違いがわかりません。多少、画面の描画が早くなったのかな〜と思う程度。

ソースの修正などは全く行わずにCrossWalkを導入するだけでうまくいきました。

 

導入

前置きが長くなりましたが、CrossWalkを導入していこうと思います。

基本的に公式サイトの説明に従って導入しました。

公式サイト: Crosswalk – Crosswalk with Cordova 4.0

とりあえず現状

CrossWalkを導入する前の状態です。多分、現在(2016.11.10)の最新版になっているはずです。

cordova -v 4
> 6.4.0
cordova platform version
> Installed platforms:
> android 5.2.2
> browser 4.1.0
> ios 4.2.1
>Available platforms:
> amazon-fireos ~3.6.3 (deprecated)
> blackberry10 ~3.8.0
> firefoxos ~3.6.3
> osx ~4.0.1
> webos ~3.7.0
cordova plugin list 
> cordova-plugin-admobpro 2.20.1 "AdMob Plugin Pro"
> cordova-plugin-extension 1.5.1 "Cordova Plugin Extension"
> cordova-plugin-whitelist 1.3.0 "Whitelist"

CrossWalkの導入は他のプラグインと同様に以下のコマンドで行います。既に作成されたプロジェクトの中で以下を実行します。

cordova plugin add cordova-plugin-crosswalk-webview

…おわり。

 

実行

今まで通り、cordova run android や cordova build android などのコマンドを使うと、CrossWalkのWebViewを用いたパッケージが生成されます。この時にパッケージは[x86]版と[armv7]版が作成されます。

cordoba run androidなどと指定した際には、プラットフォームごとに適したパッケージがインストールされるようです。

# 例
cordova build android --release
# (<開発ルート>/platforms/android/build/outputs/apk/<ここ>)
ls
> android-armv7-release-unsigned.apk
> android-x86-release-unsigned.apk

署名されたパッケージの生成方法は[CordovaでAndroidのキーファイルを指定して署名]で掲載しています。署名の際に「-sigalg SHA1withRSA -digestalg SHA1」オプションが必要なので注意してください。

ストアに登録する際には署名したパッケージを2つとも使います。

パッケージをアップロードする際に右上の[アドバンスモードに切り替える]を押すと複数のパッケージをアップロードすることができます。
(1つ公開してから、もう一つ公開するような流れになります。

 

 

たぶん、無事にAndroid4.1~4.3に対応することができました。この方法に辿り着くまで5時間以上かかった気がする…。Whitelistで頑張ろうとしすぎたかな〜

できてよかった! めでたし。

One thought on “CordovaでCrossWalkを使う。(AjaxをAndroid4.X使う

  1. Pingback: CordovaでAndroidアプリを作成する – 高度な機能編 | eye4brain

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください