メインコンテンツにジャンプします
Capacitor

Updating from Capacitor 4 to Capacitor 5: A Step-by-Step Guide

Learn how to update your project from Capacitor 4 to Capacitor 5 with minimal breaking changes, including updating official plugins and required tools.

著者

マーティン・ドナディュー

ライター

バレリア

レビュアー

ジョーダン

編集者

Updating from Capacitor 4 to Capacitor 5: A Step-by-Step Guide

Compared to previous updates, the transition from Capacitor 4 to Capacitor 5 involves minimal breaking changes. This guide provides step-by-step instructions for updating your project to Capacitor 5, as well as a list of breaking changes for official plugins.

注記Capacitor 5 は、NodeJS 16 以上が必要です。Node 12 はすでにサポート終了であり、Node 14 は 2023 年 4 月 30 日にサポート終了となります。最新の LTS バージョンの NodeJS を使用することをお勧めします。

  1. Capacitor 5をインストールします。 latest Capacitor 4 から Capacitor 5 までのプロジェクトの Capacitor CLI のバージョンです。

    npm i -D @capacitor/cli@latest
  2. Capacitor 5 にアップグレードする際のマイグレーションを CLI が自動で行うようにします。

    npx cap migrate

    アップグレードの際に、migrationステップのいくつかが実行できなかった場合、ターミナル出力に追加情報が提供されます。 以下に、手動で実行する必要があるmigrationステップが記載されています。

  3. If you have the VS Code extension installed, check the recommendations section of the extension to find the option to migrate your project to Capacitor 5.

Upgrading Capacitor 4 iOS Project to Capacitor 5

  1. アップグレード XcodeCapacitor 5 は、Xcode 14.1 以降を必要とします。

  2. Capacitor 5 へのアップデート: __CAPGO_KEEP_0__ から __CAPGO_KEEP_1__ へのアップグレードを実行してください。 .gitignore : ファイルを更新してください。

    - App/Podfile.lock
    + App/output
  3. Update Assets を使用して、単一のアプリアイコンを使用するように変更してください。コンテキスト: 解決策 ページのアプリ例のセクション。役割: 画像の代替テキスト。見られる場所: コンポーネントの解決策例/SolutionAppExample.astro。メッセージキー `solution_app_examples_icon_alt` (Solution App Examples Icon Alt)。

Upgrading Capacitor 4 Android Project to Capacitor 5

  1. __CAPGO_KEEP_0__ 4 Android Project を __CAPGO_KEEP_1__ 5 にアップグレードする: Capacitor 5 requires Android Studio Flamingo | 2022.2.1 or newer due to the usage of Gradle 8, which requires Java JDK 17. Java 17 ships with Android Studio Flamingo, so no additional downloads are needed.

  2. : __CAPGO_KEEP_0__ 5 は、Gradle 8 の使用に伴い、Java JDK 17 を必要とします。Java 17 は Android Studio Flamingo に含まれているため、追加のダウンロードは必要ありません。AGP アップグレード アシスタントを実行してください。 Tools -> AGP Upgrade Assistant.

  3. : Android Studio は、Gradle とパッケージの移動に関するいくつかの更新を手助けすることができます。アップグレードを開始するには、Android Project Variables を更新してください。 variables.gradle : アプリのファイルを更新してください。値を次の新しい最小値に更新してください。

    minSdkVersion = 22
    compileSdkVersion = 33
    targetSdkVersion = 33
    androidxActivityVersion = '1.7.0'
    androidxAppCompatVersion = '1.6.1'
    androidxCoordinatorLayoutVersion = '1.2.0'
    androidxCoreVersion = '1.10.0'
    androidxFragmentVersion = '1.5.6'
    coreSplashScreenVersion = '1.0.0'
    androidxWebkitVersion = '1.6.1'
    junitVersion = '4.13.2'
    androidxJunitVersion = '1.1.5'
    androidxEspressoCoreVersion = '3.5.1'
    cordovaAndroidVersion = '10.1.1'
  4. Google Servicesの更新:

    # build.gradle
    dependencies {
    -       classpath 'com.google.gms:google-services:4.3.13'
    +       classpath 'com.google.gms:google-services:4.3.15'
    }
  5. Gradleプラグインを8.0.0に更新:

    # build.gradle
    dependencies {
    -       classpath 'com.android.tools.build:gradle:7.2.1'
    +       classpath 'com.android.tools.build:gradle:8.0.0'
    }
  6. Gradleワッパーを8.0.2に更新:

    # gradle-wrapper.properties
    distributionBase=GRADLE_USER_HOME
    distributionPath=wrapper/dists
    - distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip
    + distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.2-all.zip
    zipStoreBase=GRADLE_USER_HOME
    zipStorePath=wrapper/dists
  7. Jetifierを無効化:

    # gradle.properties
    android.useAndroidX=true
    - android.enableJetifier=true
  8. パッケージを build.gradle:

    # AndroidManifest.xml
    <?xml version="1.0" encoding="utf-8"?>
    - <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    -     package="[YOUR_PACKAGE_ID]">
    + <manifest xmlns:android="http://schemas.android.com/apk/res/android">
    # build.gradle
    android {
    +     namespace "[YOUR_PACKAGE_ID]"
          compileSdkVersion rootProject.ext.compileSdkVersion
  9. androidSchemeを更新: Capacitor 6 https は、__CAPGO_KEEP_0__ アプリケーションがシステムのオートフィル機能を使用できるようにするために、既存のアプリケーションにデフォルト設定として使用されるようになります。 この変更の結果としてデータの喪失を避けるには、スキームを androidScheme for existing apps to better enable Capacitor applications to use the system Autofill feature. To avoid data loss as a result of this change, set the scheme to http Kotlinのバージョンを更新

    {
      server: {
        androidScheme: "http"
      }
    }
  10. : Kotlinを使用しているプロジェクトの場合、__CAPGO_KEEP_0__ kotlin_version 変数を '1.8.20'.

プラグイン機能の変更

以下のプラグイン機能が変更または削除されました。code を更新してください。

  • アクションシート
  • ブラウザ
  • カメラ
  • デバイス
  • 位置情報
  • Google マップ
  • ローカル通知
  • プッシュ通知
  • ステータスバー

アクション シート

  • Capacitor 5 にアップグレードする androidxMaterialVersion 変数を 1.8.0.

ブラウザ

  • Capacitor 5 にアップグレードする androidxBrowserVersion 変数を 1.5.0.

カメラ

  • Android 13 の場合、読み取り用メディア イメージの許可を追加してください (<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>) in AndroidManifest.xml.
  • Capacitor 5 にアップグレードする androidxMaterialVersion 変数を 1.8.0.
  • Capacitor 5 にアップグレードする androidxExifInterfaceVersion 変数を 1.3.6.

デバイス

  • 変更 DeviceId.uuidDeviceId.identifier.
  • iOS 16+ では、 DeviceInfo.name 適切な特権を追加することなく、一般的なデバイス名が返されます。 位置情報.

更新

  • playServicesLocationVersion Google Maps 21.0.1.

以下の変数を更新してください:

  • __CAPGO_KEEP_0__
    • googleMapsPlayServicesVersion18.1.0.
    • googleMapsUtilsVersion3.4.0.
    • googleMapsKtxVersion3.4.0.
    • googleMapsUtilsKtxVersion3.4.0.
    • kotlinxCoroutinesVersion1.6.4.
    • androidxCoreKTXVersion1.10.0.
    • kotlin_version ローカル通知 1.8.20.

Android 13では、__CAPGO_KEEP_0__ 33をターゲットにした場合にローカル通知をスケジュールするために必要な新しいランタイムパーミッションチェックが必要です。Call

  • For Android 13, a new runtime permission check is required to schedule local notifications when targeting SDK 33. Call checkPermissions() したがって。 requestPermissions() プッシュ通知

  • Android 13では、SDK 33にターゲットを設定してプッシュ通知を受信するには、新しい実行時許可チェックが必要です。Call checkPermissions()requestPermissions() したがって。
  • を更新する firebaseMessagingVersion に変える 23.1.2.

ステータスバー

  • iOSでは、デフォルトのステータスバーのアニメーションが変更されました。 FADE.

codeを更新する手順に従い、codeをCapacitor 4からCapacitor 5に更新した後、すべての機能とプラグインが予想どおりに機能していることを確認するために、テストアプリケーションを徹底的にテストしてください。

Capacitor 4からCapacitor 5へのアップデートの続き: ステップバイステップのガイド

__CAPGO_KEEP_0__ 4から__CAPGO_KEEP_1__ 5へのアップデートの続き: ステップバイステップのガイド Updating from Capacitor 4 to Capacitor 5: A Step-by-Step Guide を接続する Capgo プラグイン ディレクトリ for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, プラグインの追加または更新 プラグインの実装詳細 Ionic エンタープライズ プラグインの代替 Capacitor 5 のネイティブ ビルド Capgo Native Builds for the product workflow in Capgo Native Builds.

Live updates for Capacitor apps

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

マーティンによる人によるサポート

今すぐ始めよう

最新のブログ記事

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。