Cordova アプリを開発中、やっぱりスワイプバックはしたい！ということで、実装することにしました。
で、React での実装方法やら、フレームワークでの実装方法やらを調べて試してみたのですが上手くいかず…。
ですが、Cordova での実装方法を調べていた時に発見したプラグインで簡単に実装できることが判明しました！
それがこちら。
「cordova-plugin-wkwebview-engine」というプラグインです。
GitHub – apache/cordova-plugin-wkwebview-engine: Apache Cordova wkwebview engine plugin
https://github.com/apache/cordova-plugin-wkwebview-engine
実装方法ですが、まず下記のコマンドでプラグインをインストールします。
cordova plugin add cordova-plugin-wkwebview-engine
こちらが完了したら、config.xml を開きます。
下記の 4行については、プラグインのインストール時に自動で追加されるはずですが、もし追加されていないようでしたら追加してください。
<feature name="CDVWKWebViewEngine"> <param name="ios-package" value="CDVWKWebViewEngine" /> </feature> <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
私は <platform name="ios"> タグ内に追加しました。
そして、合わせて下記も追加しておきます。
<preference name="WKWebViewOnly" value="true" />
こちらは、cordova-ios が 5.1.0 以上を使用している場合は、追加した方がいいとのことでした。
ここまでが事前準備です。
あとは、スワイプバックを有効にするために、下記の 1行を追加します。
<preference name="AllowBackForwardNavigationGestures" value="true" />
ちなみに、コードで追加する方法もあり、その場合は下記の 1行を任意の場所に追加してください。
window.WkWebView.allowsBackForwardNavigationGestures(true);
おそらく、deviceready が発火した直後辺りで実行すれば問題ないと思います。
追加するのはこれだけです！
実機で確認したところ、予想以上に自然なスワイプバックが実装できていました！
ですが、意外なところで問題が発生しております。
こちらのプラグインはアプリで使用する WebView を UIWebView から WKWebView に変更しているのですが、このとき CORS を有効にしないと、API などにアクセスすることができなくなってしまいます。
実際、今まで使用していたログイン機能でエラーが発生しています…。
この辺りの対策って苦手なのですが…何とか頑張ります！
以上、Cordova で開発した iOS アプリでスワイプバックを有効にする方法でした。
ご参考になれば幸いです。
