7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Cordova 10にバージョンアップする際にハマったこと

Last updated at Posted at 2021-03-16

MonacaのプロジェクトをCordova 10.0(Cordova iOS 6.1.1、Cordova Android 9.0.0)にバージョンアップして色々とハマったのでまとめます(Cordova iOS 6.0.0でUIWebViewが完全に削除された関係でiOSの内容が多めです)
ちなみにXcodeのバージョンも12.2にアップデートしています。

※MonacaのプロジェクトをCordova 10にバージョンアップする方法については以下を参照ください。
https://docs.monaca.io/ja/release_notes/20201119_cordova10/

(iOS) cordova-plugin-wkwebview-engineに依存しているプラグイン

Cordova iOS 6.0.0以降からCordova本体にWKWebViewが統合されました。そのため、cordova-plugin-wkwebview-engineは非推奨になり、Cordova iOS 6.0.0以降でビルドするとエラーになります。

私のケースだと、cordova-plugin-migrate-localstorageというUIWebViewからWKWebViewにLocalStorageのデータを移行するプラグインがcordova-plugin-wkwebview-engineに依存していたためエラーになっていました。

このケースではplugin.xmlを開いて、<dependency id="cordova-plugin-wkwebview-engine" version="^1.1.0" />を削除して対応しました。

(iOS) cordova-plugin-inappbrowserのバージョンアップ

cordova-plugin-inappbrowserを利用している場合、UIWebViewが含まれていない4.0.0以降にアップデートする必要があります。

window.openが上書きされなくなった

3.2.0まではwindow.opencordova.InAppBrowser.openで上書きしていたため、例えばブラウザでURLを開く処理をwindow.open(url, '_system')のように書くことができましたが、4.0.0から上書きされなくなりました

InAppBrowserの機能をwindow.openで利用していた場合、window.opencordova.InAppBrowser.openで置換するか、以下のように手動でwindow.openの上書きを行う必要があります。

window.open = cordova.InAppBrowser.open;

(iOS) スプラッシュスクリーンが閉じられない

cordova-plugin-splashscreenを使用してスプラッシュスクリーンを表示していたのですが、navigator.splashscreen.hide()を呼び出してもスプラッシュスクリーンが非表示にならないことがありました。

どうやら、Cordova iOS 6.0.0以降でAutoHideSplashScreenfalseSplashScreenDelayが設定されている場合に発生するようです。
SplashScreenDelayを削除すれば非表示にすることができました。

参考: https://github.com/apache/cordova-plugin-splashscreen/issues/307

(iOS) Custom Schemeプラグインの削除

Monacaが提供しているCustom Schemeプラグインは同等の機能をCordova 10.0が提供するため、 Cordova 10.0にアップデートするとプロジェクトから自動で削除されます。

その際、config.xmlには以下の設定が追加されます。これは、アプリにバンドルするリソース(HTMLなど)のスキームがmonaca-app、ホスト名がlocalhostになるという意味です。

<platform name="ios">
  <preference name="scheme" value="monaca-app"/>
  <preference name="hostname" value="localhost"/>
</platform>

ここで注意すべきはCustom Schemeプラグインの場合、ホスト名がmonaca.ioになるという点です。
元々Custom Schemeプラグインを導入していたアプリで、ホストをlocalhostにしたままビルドするとオリジンが異なるため、ローカルストレージなどの値が参照できなくなってしまいます。
ローカルストレージなどを引き継ぎたい場合は以下のようにホスト名をmonaca.ioにする必要があります。

<preference name="hostname" value="monaca.io"/>

参考: https://qiita.com/kishisuke/items/df8b20a78e9d6843ab01

また、Cordova iOS 5.xまでは(Custom Schemeプラグインを使っていなかった場合)、fileスキームによるアクセスを行います。そのため、デフォルトの設定ではCustom Schemeプラグインと同様に別オリジンとなります。
Cordova iOS 6.xでもfileスキームのままにしたい場合はschemefileにするか、schemeのpreferenceタグを削除すれば良いです。

(Android) minSdkVersion

Cordova Android 9.0.0より、minSdkVersionを22(Android 5.1)以上にする必要があります。

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?