Web アプリの Cordova から Capacitor へのマイグレーション

Cordova を使用して Web アプリケーションを完全に Capacitor に移行するには、いくつかの手順が必要です。

Note これらの変更を適用する場合は、別のコードブランチで作業することをお勧めします。

Capacitor を追加する

まず、プロジェクトをターミナルで開き、Web アプリ か Ionic アプリ の方法で Capacitor を追加します。

次に、config.xmlを開いて、widget エレメントにあるidを見つけます。例えば、 io.ionic.myapp です。

<widget id="io.ionic.myapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

またあなたのアプリの Name を見つけます:

<name>MyApp</name>

Capacitor のインストールの時に、あなたのアプリの情報を入力します:

npx cap init [appName] [appId]

例えば、これは npx cap init MyApp io.ionic.myapp のようになります。これらの値は新しく作成される capacitor.config.json に反映されます。

アプリをビルドする

Native プラットフォームを追加する前に、Web プロジェクトを少なくとも 1 回構築する必要があります。

これにより、Capacitor が、capacitor.config.jsonのwebDirにおいて使用するように自動的に設定されたwww フォルダーが実際に存在するようになります。

Platforms の追加

Capacitor の Native プラットフォームは、その最上位フォルダにあります。Cordova の場合は、platforms/ios もしくは platforms/android でした。

npx cap add ios
npx cap add android

プロジェクトのルートにある android フォルダと ios フォルダの両方が作成されます。これらは完全に独立した Native プロジェクトの成果物であり、アプリの一部と見なす必要があります（つまり、それらをソース管理にチェックインしたり、独自の IDE で編集したりするなど）。さらに、以前に npm install（ package.jsonの dependenciesの下にあります）でプロジェクトに追加された Cordova プラグインは、Capacitor によってそれぞれの新しい Native プロジェクトに自動的にインストールされます（incompatible onesは除きます）：

"dependencies": {
    "@ionic-native/camera": "^5.3.0",
    "@ionic-native/core": "^5.3.0",
    "@ionic-native/file": "^5.3.0",
    "cordova-android": "8.0.0",
    "cordova-ios": "5.0.0",
    "cordova-plugin-camera": "4.0.3",
    "cordova-plugin-file": "6.0.1",
}

スプラッシュ画像とアイコン

アイコンとスプラッシュ画像を以前に作成したことがある場合は、プロジェクトの最上位レベルのresourcesフォルダにあります。cordova-res ルールを使って、生成したアイコンとスプラッシュ画像を各 Native プロジェクトに移動します。

まず、 cordova-res をインストールください:

$ npm install -g cordova-res

次に次のコマンドで画像を生成して Native プロジェクトにコピーしてください:

$ cordova-res ios --skip-config --copy
$ cordova-res android --skip-config --copy

詳細はこちらをご覧ください.

プラグインのマイグレート

まず、既存の Cordova プラグインを監査します - 不要になったプラグインを削除できる場合があります。

次に、Capacitor の core plugins と community plugins をすべて確認します。Cordova と同等の Capacitor プラグインに切り替えることができます。

一部のプラグインは機能は完全には一致しませんが、必要な機能は実装されている場合があります。

Note: 既知の非互換プラグイン は自動的にスキップされます

Cordova Plugin の削除

Cordova プラグインを Capacitor プラグインに置き換えたあと(もしくは完全に削除することもできます)、プラグインをアンインストールし、 sync コマンドを実行して Native プロジェクトからプラグインコードを削除します。

npm uninstall cordova-plugin-name
npx cap sync [android | ios]

Permissions の設定

デフォルトでは、最新バージョンの Capacitor に要求された初期設定の権限が、iOS と Android の両方のデフォルト Native プロジェクトに設定されます。ただし、 plugin.xml でマッピングすることによって、追加のアクセス権を手動で適用する必要がある場合があります。この設定は、iOS と Android では必須です。各プラットフォームの設定方法については、 iOS および Android の設定ガイドを参照してください。

Cordova Plugin preferences

npx cap init が実行されると、コンデンサは config.xml のすべてのプリファレンスを読み込みます。これらを capacitor.config.json に移植します。手動で cordova.preferences に環境設定を追加することもできます。

{
  "cordova": {
    "preferences": {
      "DisableDeploy": "true",
      "CameraUsesGeolocation": "true"
    }
  }
}

Config.xml フィールドの追加

あなたは config.xml の他の要素が Capacitor アプリではどのように動作するか気になるかもしれません。

Author 要素はpackage.json で設定できます。ただし、Capacitor やアプリケーション内では使用されません:

<author email="email@test.com" href="https://ionicframework.com/">Ionic Framework Team</author>

allow-intent値のほとんどは使用されませんが、Capacitor に構成可能な代替手段の設定があります。

<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />

iOS のedit-config 要素は configured in Info.plist を必要とします。

<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
    <string>Used to take photos</string>
</edit-config>

すべてのconfig.xmlの要素をカバーするのは不可能です。しかし、”Capacitor で X を設定するにはどうやったらいい？”に関する質問のほとんどは、オンラインで答えを探すときには「[プラットフォーム] (iOS/Android)で X を設定するには?」と考えるべきです。

Scheme の設定

Cordova で Ionic を使用すると、アプリはデフォルトで cordova-plugin-ionic-webview を使用し、iOS ではコンテンツの提供に ionic:// scheme を使用します。Capacitor アプリは iOS のデフォルトスキームとして capacitor:// を使用しています。これは LocalStorage のようなオリジンバインドされた Web API を使用すると、起点が異なるためデータが失われることを意味します。これは、コンテンツの提供に使用するスキームを変更することで修正できます。

{
  "server": {
    "iosScheme": "ionic"
  }
}

Cordova の削除

すべてのマイグレーション変更が適用され、アプリケーションが正常に動作することをテストしたら、Cordova をプロジェクトから削除できます。config.xmlを削除します。platforms フォルダと plugins フォルダも同様です。Cordova は Capacitor と一緒に動作するので、技術的に取り外す必要はないことに注意してください。実際、Cordova プラグインの使用を継続する予定がある場合、または将来的に使用する可能性がある場合は、Cordova アセットをそのまま使用できます。

次のステップ

これは、Capacitor の旅の始まりにすぎません。より学ぶには、Capacitor プロジェクトでの using Cordova pluginsか、より詳しくは development workflow をご覧ください。