Pendahuluan
Anda sudah memiliki aplikasi web progresif. Aplikasi ini berfungsi di browser, memiliki manifest, dan mungkin menggunakan service worker untuk dukungan offline. Jika Anda sekarang membutuhkan distribusi aplikasi di toko aplikasi, API perangkat natif, atau funnel onboarding yang lebih baik, migrasi ke aplikasi Capacitor biasanya lebih cepat daripada mengulang front end Anda.
Kelebihan terbesar adalah Anda dapat menjaga hampir semua web code yang sudah ada. Dalam kebanyakan kasus, Anda hanya perlu:
- membangun aset web produksi,
- inisialisasi Capacitor dengan yang tepat
webDir, - tambahkan proyek iOS dan Android,
- dan hubungkan plugin native hanya di mana diperlukan.
Jika PWA Anda memiliki rute yang bersih dan logika komponen, ini dapat memakan waktu hanya beberapa jam.
Prasyarat
Waktu perkiraan: 2-5 jam, tergantung pada fitur spesifik platform.
- Node.js 18+ dengan Bun
- Sumber kode PWA Anda yang sudah ada code (React, Vue, Angular, Svelte, dll.)
- Xcode untuk iOS, macOS hanya
- Studio Android untuk Android
- akun pengembang Apple jika Anda berencana untuk menerbitkan iOS
- akun pengembang Google Play untuk distribusi Android
Langkah 1: Periksa PWA Anda sebelum menggabungkannya dengan native
Sebelum Anda menjalankan bunx cap init, pastikan aplikasi web Anda sudah siap produksi:
- Pastikan PWA Anda memiliki skrip pembangunan produksi (misalnya
bun run build). - Pastikan folder keluaran web Anda sudah menentukan (seringnya
dist,build, atauout). - Hapus redirect absolut yang dikodekan secara keras yang mengasumsikan konteks browser hanya.
- Pastikan perilaku pekerjaan layanan kompatibel dengan mobile WebViews:
- Tetapkan dukungan offline jika itu membantu pengguna Anda.
- Hindari API browser hanya yang tidak tersedia di dalam webview yang diintegrasikan.
- Konfirmasi prompt instalasi PWA dan UX browser spesifik masih relevan. Dalam aplikasi Capacitor, prompt instalasi biasanya tidak diperlukan.
Langkah 2: Mengadaptasi perilaku web hanya
Tetapkan antarmuka pengguna aplikasi Anda tetapi tutup logika browser hanya.
Pakai cek platform sederhana di sekitar prompt instalasi dan push:
import { Capacitor } from '@capacitor/core'
const isNative = Capacitor.isNativePlatform()
function registerInstallPrompt() {
if (isNative) return
// existing browser-only install or Web Push code
}Ini menghindari logika browser hanya yang berjalan di dalam kontainer native.
Langkah 3: Inisialisasi Capacitor di folder PWA Anda
Dari root PWA yang sudah ada:
bun add @capacitor/core
bun add -D @capacitor/cliJalankan Capacitor init dengan nama aplikasi, ID aplikasi, dan direktori keluaran web:
bunx cap init MyPWAApp com.example.my-pwa-app --web-dir distJika direktori build Anda build (Create React App) atau out (Next.js static export), ganti dist.
Tambahkan konfigurasi dasar Capacitor :
import type { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
appId: 'com.example.my-pwa-app',
appName: 'MyPWAApp',
webDir: 'dist',
server: {
iosScheme: 'https',
},
}
export default configLangkah 4: Tambahkan platform native
Pasang paket native inti dan buat folder proyek:
bun add @capacitor/ios @capacitor/android
bunx cap add ios
bunx cap add androidPada titik ini Capacitor telah membuat ios/ dan android/ folder. Sinkronisasi akan menyalin aset web yang dibangun ke kedua platform.
Langkah 5: Bangun aplikasi web Anda dan sinkronisasi
Bangun PWA dan sinkronkan aset web:
bun run build
bunx cap syncSekarang buka proyek native:
bunx cap open ios
bunx cap open androidDari Xcode atau Android Studio, hubungkan perangkat atau emulator dan jalankan.
Langkah 6: Pengembangan asli setelah migrasi
Ini adalah tempat Anda mengganti fitur web hanya dengan API asli di mana diperlukan:
- Pemberitahuan push ->
@capacitor/push-notifications - Penyimpanan kunci/nilai yang aman ->
@capacitor/preferences - Kamera / media ->
@capacitor/camera - Autentikasi biometrik ->
@capacitor-community/native-biometric(atau plugin pilihan Anda)
Untuk setiap plugin asli baru:
- Instal paket plugin
- Konfigurasi pengaturan spesifik plugin
- Jalankan:
bunx cap syncLalu, rekonstruksi dan jalankan lagi.
Langkah 7: Pengecekan keserupaan toko aplikasi
Sebelum pengiriman:
- Uji tautan dalam dan routing (
/dan rute dalam) pada kedua platform. - Pastikan status bar, area aman, dan orientasi benar.
- Hapus metadata web yang tidak digunakan yang bertentangan dengan perilaku aplikasi (misalnya, prompt instalasi).
- Tetapkan pengaturan keamanan transportasi dan privasi aplikasi konsisten dengan kebijakan Anda.
- Tambahkan ikon aplikasi/aset splash untuk setiap platform.
Jika aplikasi Anda menggunakan update OTA, pasir pipa rilis Anda dengan strategi update yang aman untuk native dan pertimbangkan Capgo untuk peluncuran terkendali dan rollback.
Daftar periksa akhir
- Aplikasi web dibangun dengan bersih (
bun run build) - Capacitor diinisialisasi dengan yang tepat
webDir bunx cap add iosdanbunx cap add androidselesai- Aplikasi native berjalan pada perangkat nyata
- Jalur code hanya browser saja untuk menggantikan perilaku native
- Saluran pembaruan dan aset toko aplikasi telah dikonfigurasi
Anda telah melakukan sebagian besar pekerjaan sulit ketika membangun PWA. Menggabungkannya dengan Capacitor memberikan Anda:
- Distribusi ke toko aplikasi
- Akses ke API native
- Iterasi yang lebih cepat tanpa perlu merilis ulang code secara penuh
- Saluran pengembangan tunggal untuk tim web dan mobile.
Mulai dari alur ini, kemudian iterasi native-by-native berdasarkan analisis dan umpan balik pengguna.
Teruskan dari Transform Your PWA ke Aplikasi Nativ dengan Capacitor
Jika Anda menggunakan Transform Your PWA ke Aplikasi Nativ dengan Capacitor untuk merencanakan migrasi dan operasi bisnis, hubungkannya dengan Capgo Enterprise untuk alur kerja produk di Capgo Enterprise, Alternatif Plugin Ionic Enterprise untuk alur kerja produk di Alternatif Plugin Ionic Enterprise, Capgo Alternatif untuk alur kerja produk di Capgo Alternatif, Capgo Konsultasi untuk alur produk di Capgo Consulting, dan Capgo Support Premium untuk alur produk di Capgo Support Premium.
