Lebih lanjut ke konten utama
Capacitor

Memperbarui dari Capacitor 4 ke Capacitor 5: Panduan Langkah demi Langkah

Belajar cara memperbarui proyek Anda dari Capacitor 4 ke Capacitor 5 dengan perubahan yang minimal, termasuk memperbarui plugin resmi dan alat yang diperlukan.

Martin Donadieu

Martin Donadieu

Pengembang Konten

Memperbarui dari Capacitor 4 ke Capacitor 5: Panduan Langkah demi Langkah

Dibandingkan dengan pembaruan sebelumnya, transisi dari Capacitor 4 ke Capacitor 5 melibatkan perubahan yang minimal. Panduan ini menyediakan instruksi langkah demi langkah untuk memperbarui proyek Anda ke Capacitor 5, serta daftar perubahan yang mengganggu untuk plugin resmi.

Catatan: Capacitor 5 memerlukan NodeJS 16 atau lebih tinggi, karena Node 12 telah mencapai akhir masa pakainya dan Node 14 akan mencapai akhir masa pakainya pada 30 April 2023. Disarankan untuk menggunakan versi LTS terbaru dari NodeJS.

  1. Instal latest versi dari Capacitor CLI di proyek Anda:

    npm i -D @capacitor/cli@latest
  2. Jalankan perintah berikut untuk membiarkan CLI mengelola migrasi:

    npx cap migrate

    Jika ada langkah migrasi yang tidak dapat dicapai, informasi tambahan akan disediakan dalam output terminal. Langkah migrasi manual tercantum di bawah ini.

  3. Jika Anda memiliki ekstensi VS Code terinstal, periksa bagian rekomendasi ekstensi untuk menemukan opsi untuk memigrasikan proyek Anda ke Capacitor 5.

Mengupgrade Capacitor 4 Proyek iOS ke Capacitor 5

  1. Upgrade XcodeCapacitor 5 memerlukan Xcode 14.1+.

  2. Update .gitignore : Buatlah perubahan-perubahan berikut pada file Anda: .gitignore Update Assets untuk menggunakan ikon aplikasi tunggal

    - App/Podfile.lock
    + App/output
  3. context":"Page/area: Halaman solusi aplikasi contoh. Peran: Teks alternatif gambar. Dilihat di: komponen solusi/SolutionAppExample.astro. Pesan kunci `solution_app_examples_icon_alt` (Teks Alternatif Ikon Contoh Aplikasi Solusi). : Xcode 14 mendukung ikon aplikasi tunggal berukuran 1024x1024. Bersihkan AppIcon.appiconset Anda dengan menghapus semua ukuran yang tidak perlu.

Memperbarui Capacitor 4 Proyek Android ke Capacitor 5

  1. Upgrade Studio Android: Capacitor 5 memerlukan Studio Android Flamingo | 2022.2.1 atau lebih baru karena penggunaan Gradle 8, yang memerlukan JDK Java 17. Java 17 dilengkapi dengan Studio Android Flamingo, sehingga tidak perlu download tambahan.

  2. Jalankan Asisten Perbarui AGP: Studio Android dapat membantu dengan beberapa update terkait Gradle dan memindahkan paket ke file build. Untuk memulai, jalankan Tools -> AGP Upgrade Assistant.

  3. Perbarui Variabel Proyek Android: Dalam file Anda, perbarui nilai-nilai Anda ke minimum baru berikut: variables.gradle Perbarui Layanan Google

    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. Perbarui Plugin Gradle ke 8.0.0:

    # build.gradle
    dependencies {
    -       classpath 'com.google.gms:google-services:4.3.13'
    +       classpath 'com.google.gms:google-services:4.3.15'
    }
  5. Perbarui Penggabung Gradle ke 8.0.2:

    # build.gradle
    dependencies {
    -       classpath 'com.android.tools.build:gradle:7.2.1'
    +       classpath 'com.android.tools.build:gradle:8.0.0'
    }
  6. Nonaktifkan Jetifier:

    # 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. Perbarui __CAPGO_KEEP_0__ 4 Proyek Android ke __CAPGO_KEEP_1__ 5:

    # gradle.properties
    android.useAndroidX=true
    - android.enableJetifier=true
  8. Migrasikan paket ke 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. Update androidScheme: Di Capacitor 6, https akan menjadi pengaturan default untuk androidScheme untuk aplikasi yang sudah ada untuk memungkinkan aplikasi Capacitor menggunakan fitur Autofill sistem. Untuk menghindari kehilangan data sebagai hasil dari perubahan ini, atur scheme ke http sekarang, bahkan jika itu sudah menjadi pengaturan default sebelumnya.

    {
      server: {
        androidScheme: "http"
      }
    }
  10. Update versi Kotlin: Jika proyek Anda menggunakan Kotlin, update kotlin_version ke '1.8.20'.

Pengaturan Perubahan Fungsi Plugin

Pengaturan fungsi plugin berikut telah diubah atau dihapus. Perbarui code Anda sesuai dengan perubahan ini:

  • Aksi Sheet
  • Browser
  • Kamera
  • Perangkat
  • Lokasi
  • Peta Google
  • Pemberitahuan Lokal
  • Pemberitahuan Push
  • Status Bar

Sheet Aksi

  • Perbarui androidxMaterialVersion variabel ke 1.8.0.

Browser

  • Perbarui androidxBrowserVersion ke 1.5.0.

Kamera

  • Untuk Android 13, tambahkan izin membaca gambar media (<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>) di AndroidManifest.xml.
  • Perbarui androidxMaterialVersion ke 1.8.0.
  • Perbarui androidxExifInterfaceVersion ke 1.3.6.

Peralatan

  • Ganti DeviceId.uuid ke DeviceId.identifier.
  • On iOS 16+, DeviceInfo.name akan mengembalikan nama perangkat umum kecuali Anda menambahkan hak istimewa yang tepat keharusan.

Peta Lokasi

  • Perbarui playServicesLocationVersion ke 21.0.1.

Peta Lokasi Google

  • Perbarui variabel-variabel berikut:
    • googleMapsPlayServicesVersion ke 18.1.0.
    • googleMapsUtilsVersion ke 3.4.0.
    • googleMapsKtxVersion ke 3.4.0.
    • googleMapsUtilsKtxVersion ke 3.4.0.
    • kotlinxCoroutinesVersion ke 1.6.4.
    • androidxCoreKTXVersion ke 1.10.0.
    • kotlin_version ke 1.8.20.

Pemberitahuan Lokal

  • Untuk Android 13, perlu dilakukan pengecekan izin runtime baru untuk mengatur pemberitahuan lokal ketika menghadapkan diri pada SDK 33. Panggil checkPermissions() dan requestPermissions() Menurutnya.

Pemberitahuan Push

  • Untuk Android 13, perlu dilakukan pengecekan izin runtime baru untuk menerima pemberitahuan push ketika menghadapkan diri pada SDK 33. Panggil checkPermissions() dan requestPermissions() Menurutnya.
  • Perbarui firebaseMessagingVersion mengubah variabel ke 23.1.2.

Status Bar

  • Pada iOS, animasi status bar bawaan telah berubah menjadi FADE.

Mengikuti langkah-langkah ini dan mengupdate code Anda sesuai, Anda seharusnya sudah berhasil mengupdate proyek Anda dari Capacitor 4 ke Capacitor 5. Pastikan untuk menguji aplikasi Anda secara menyeluruh untuk memastikan bahwa semua fitur dan plugin berfungsi seperti yang diharapkan.

Teruskan dari Mengupdate dari Capacitor 4 ke Capacitor 5: Panduan Langkah demi Langkah

Jika Anda menggunakan Mengupdate dari Capacitor 4 ke Capacitor 5: Panduan Langkah demi Langkah untuk merencanakan kerja plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo, Mengambah atau Mengupdate Plugin untuk detail implementasi di Mengambah atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, dan Capgo Pembangunan Nama Lokal untuk alur kerja produk di Capgo Pembangunan Nama Lokal.

Live updates untuk Capacitor aplikasi

Ketika bug layer web masih aktif, kirimkan perbaikan melalui Capgo daripada menunggu hari-hari untuk persetujuan toko aplikasi. Pengguna mendapatkan update di latar belakang sementara perubahan native tetap dalam jalur review normal.

dukungan manusia dari Martin

Mulai Sekarang

Terbaru dari Blog Kami

Capgo memberikan Anda wawasan terbaik yang Anda butuhkan untuk membuat aplikasi mobile profesional yang sebenarnya.