iOS 9のUIWebViewがとても残念らしいのでWKWebViewに対応したCordova iOS 4.0(未リリース)を試してみる

iOS 9のバージョンアップが一昨日から始まったのですが、開発者的にはなかなか曲者らしいのです。
一緒にお仕事もさせていただいているトルクスの山田さんがまとめてくださったのですが、UIWebViewに結構問題があるらしく、特にCordova(PhoneGap)で開発していたり、ネイティブアプリでもInAppBrowserを使っていたりすると結構ハマります。

iOS 9で提供される3つのWebView

iOS 9では、3種類のWebViewが提供されています。

UIWebViewは、iOSで初期から提供されているWebViewです。レンダリング速度は遅いものの、一方で挙動のカスタマイズなどの自由度が高く、広く使われています。Cordova iOSでも現時点で正式リリースされているものはすべてUIWebViewを使っています。どうやら、iOS 9で残念な感じになっているのも、このUIWebViewです。

WKWebViewは、iOS 8から提供されているWebViewで、Safari等でも使用されているWebKitをレンダリングエンジンとして使用したものです。レンダリング速度も速いと言われています。ただ、UIWebViewとのAPIの互換性はなく、セキュリティ上の制限も多いとされており、なかなか活用が進んでいません。Cordova iOSでは現在開発中の4.0で対応することになっています。

SFSafariViewControllerは、iOS 9から提供され始めたWebViewで、SafariアプリとCookieの共有ができたりするようです。但し、挙動のカスタマイズは許可されていないので、個別のアプリからSafariを呼び出すのと同じようなことしかできない様子。

Cordova iOS 4.0を試してみる

iOS 9のUIWebViewで言われている問題が、実はiOS 9.0.1とかが出たときには治っているのではないか?という微かな期待はあるのですが、現時点ではWKWebViewへの移行を模索するのが進むべき道なのか。。。
行くも地獄、戻るも地獄の様相を呈してはおりますが、やるっきゃ騎士(by みやすのんき)。

リリースが遅れまくっているCordova iOS 4.0

CordovaのiOSプラットフォーム向け実装である(?なんかそういう表現とは違う気がするけど)Cordova iOSの現在開発中バージョンである4.0では、WKWebViewのサポートが行われます。

ただ、リリースが遅れに遅れていまして、もともとは2015年4月にリリースされる予定だったのですが、現時点でもまだリリースされていません。一応、開発者のブログを見ると、今月後半には出るということのようです。

Release is scheduled to be in the later part of September 2015 now that we’ve got a few devs focused on this. Features have been trimmed, and some have been pushed off to cordova-ios 5.x

Apache Cordova iOS 4.0.0, and WKWebView support

この記事を読むと、一部の機能はCordova iOS 5.0に回したいということのようですね。
開発チームのカンバンを見てみると、iOS 9で対応が必要になったATS(Application Transport Security)のチケットも作成されているので、当初はWKWebView対応が主眼だった開発に、iOS 9対応も加わっててんやわんやの様子が垣間見えます。

ATSに関する対応は、抹茶のメモ帳: 【追記】iOS9でHTTP通信がSSL通信になるのを防ぐ方法にまとまっています。ありがとうございます。

試してみる

Cordovaは導入されているという前提で、一通りCordova iOS 4.0を使うアプリを作ってみます。
Cordova標準のプラグインも導入しておきます。

cordova create cordova_ios4_test
cd cordova_ios4_test/

cordova platform add https://github.com/apache/cordova-ios.git

cordova plugin add cordova-plugin-device-motion
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-media-capture
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-device-orientation
cordova plugin add cordova-plugin-network-information
cordova plugin add cordova-plugin-contacts
cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-battery-status
cordova plugin add cordova-plugin-file-transfer
cordova plugin add cordova-plugin-geolocation
cordova plugin add cordova-plugin-globalization
cordova plugin add cordova-plugin-inappbrowser
cordova plugin add cordova-plugin-media
cordova plugin add cordova-plugin-dialogs
cordova plugin add cordova-plugin-vibration
cordova plugin add cordova-plugin-splashscreen

この後、cordova buildと進むのがお作法ですが、ここではいきなりXcodeで開いてしまいます。

cd platforms/ios/
open HelloCordova.xcodeproj

このままビルドしても、残念ながら成功しません。

CB-9638 Cordova/NSData+Base64.h missing from cordova-iosという、そのものずばりなチケットがあってRESOLVEDにはなっているのですが、上記のCordova iOS 4.0の導入方法では、まだ入ってこない様子。

Cordova iOS 3.9で作成したアプリにはNSData+Base64.hとNSData+Base64.mが入っているので、そこからコピーしてくることにします。

今回は、CordovaLib内ではなく、アプリ側(HelloCordova)のPlugins配下にインポートします。

その上で、CDVCamera.m内のNSData+Base64.hのインポートを書き直し、

さらに、NSData+Base64.h内のCDVAvailabilityDeprecated.hのインポートを書き直します。

これでビルドすると、iPhone 6s / iOS 9.0のシミュレータで起動しました。

WKWebViewは使われているのか?

これで、WKWebViewが使われているだろう・・・と思ったのですが、

あれ?UIWebViewになっている。。。

で、また先ほどの開発者ブログに戻ります。

The cordova-plugin-wkwebview-engine plugin will be iOS 9 only and it will be a core plugin. The development of this updated plugin is still in progress. Apple has fixed the bug where we couldn’t load documents from file:// urls, and it is iOS 9 only. On non-iOS 9 devices, cordova-ios will fallback to using the UIWebView.

The old version of this plugin used a local webserver to load your main document. This older plugin can be used where you want to use WKWebView in both iOS 8 and iOS 9 deployments, but the plugin will remain as a cordova-labs experiment. This plugin has some re-factoring work to be done.

Apache Cordova iOS 4.0.0, and WKWebView support
(太字:井上)

なんだ、In Progressなのか。。。

しかも、”Apple has fixed the bug where we couldn’t load documents from file:// urls”とかいう気になりすぎる記述もあるし。一応、has fixedだからAppleが修正したのね。

cordova-plugin-wkwebview-engineを見てみる

cordova-plugin-wkwebview-engineのGitHubを見てみると、現時点で試したい場合は、下記にようにインストールするようにと書いてありました。

cordova create wkwvtest my.project.id wkwvtest
cd wkwvtest
cordova platform add https://github.com/apache/cordova-ios.git#master
cordova plugin add https://github.com/apache/cordova-plugin-wkwebview-engine.git#master

とういうことで、ここまで作ってきたアプリにcordova-plugin-wkwebview-engineを追加してみます。(最後の一行だけを実行)

ビルドして、WebViewを確認してみると。。。

おぉ、WKWebViewが使われている!!

ちなみに、この状態で、iPhone 6 / iOS 8.4のシミュレータで動作させてみると。。。

ほう。iOS 8.4でもWKWebViewになるようです。
Cordova iOSの開発者ブログでは、”On non-iOS 9 devices, cordova-ios will fallback to using the UIWebView.”で、iOS 8.4ではUIWebViewになると思ったのですが、まだ開発中バージョンなので、その辺に齟齬があるようです。

ということで次回に続く

一応、Cordova iOS 4.0を導入して、WKWebViewでアプリが動作するところまでは確認出来ました。
ただ、今までUIWebView前提でたっぷりコードを書いてきたアプリがあるので、これがWKWebViewベースですんなり動くのか?(実際、昨日ビルドが通るところまでやった結果、すんなり動かなかったのですが。)

繰り返しになりますが、行くも地獄、戻るも地獄のようですが、行ってみるしかないようなので、引き続き調査していきたいと思います。

ここまでの分のテストアプリをGitHubに上げておきます。ご参考まで。

第2弾書きました。

この記事を書いた人

井上 研一

株式会社ビビンコ代表取締役、ITエンジニア/経済産業省推進資格ITコーディネータ。AI・IoTに強いITコーディネータとして活動。2018年、株式会社ビビンコを北九州市に創業。IoTソリューションの開発・導入や、画像認識モデルを活用したアプリの開発などを行っている。近著に「使ってわかった AWSのAI」、「ワトソンで体感する人工知能」。日本全国でセミナー・研修講師としての登壇も多数。