Cara Rilis Web App ke App Store dalam 11 Langkah

Untuk merilis web app ke App Store dan Google Play, bungkus web app yang sudah Anda build dalam proyek native dengan Capacitor, tambahkan beberapa fitur native, buat akun developer Apple dan Google, sign dan build binary iOS dan Android, uji dengan pengguna nyata, siapkan listing store, lalu submit untuk review. HTML, CSS, dan JavaScript Anda tetap berjalan di dalam WebView native, jadi Anda tidak perlu menulis ulang app-nya.

Berikut 11 langkah dalam urutan yang menghindari waktu tunggu, dengan command untuk Capacitor 8 dan aturan store yang berlaku Oktober 2026.

Yang Anda butuhkan

• Web app yang di-build menjadi static files (React, Vue, Angular, Svelte, Next.js static export, Nuxt generate, HTML biasa, atau app dari AI builder seperti Lovable atau Bolt).
• Node.js 22 atau lebih baru (syarat Capacitor 8) dan Bun atau package manager lain.
• Android Studio untuk build Android.
• Xcode 26 di macOS untuk build iOS, atau layanan cloud build jika Anda tidak punya Mac.
• 99 USD per tahun untuk Apple dan 25 USD sekali bayar untuk Google.

Timeline realistis

Langkah 1: Mulai pendaftaran akun developer hari ini

Verifikasi akun adalah langkah yang tidak bisa dipercepat, jadi lakukan sebelum mulai coding.

• Program Apple Developer: 99 USD per tahun. Individu memerlukan Apple Account dengan autentikasi dua faktor dan nama legal. Organisasi juga memerlukan nomor D-U-N-S, situs web perusahaan, dan email kerja di domain tersebut.
• Google Play Console: 25 USD sekali. Organisasi memerlukan nomor D-U-N-S. Siapkan verifikasi identitas.

Jika Anda mendaftar di Google Play sebagai individu, akun Anda tunduk pada aturan closed testing (Langkah 9). Panduan lengkap: cara membuat akun developer Apple dan Google Play.

Langkah 2: Siapkan web app untuk ponsel

Capacitor menjalankan aplikasi Anda di dalam WebView. Hal-hal yang wajar di tab browser terasa salah di dalam aplikasi:

• Output build statis. Capacitor memuat file dari app bundle. Server-side rendering tidak berjalan di ponsel. Gunakan output statis dari framework Anda (next build dengan output: 'export', nuxt generate, Vite build). Panggilan API tetap ke backend Anda via HTTPS seperti biasa.
• Client-side routing yang berfungsi dari file origin. Gunakan history routing (Capacitor menyajikan aplikasi dari https://localhost di Android dan capacitor://localhost di iOS, jadi tetap berfungsi) dan pastikan deep URL memiliki fallback ke index.html.
• CORS. Tambahkan origin Capacitor ke allowed origins API Anda: capacitor://localhost (iOS) dan https://localhost (Android).
• Sentuh, bukan hover. Hapus menu yang hanya muncul saat hover. Pastikan target tap minimal 44 x 44 poin.
• Safe area. Tambah viewport-fit=cover ke viewport meta tag dan beri padding pada header serta bottom bar dengan env(safe-area-inset-top) dan env(safe-area-inset-bottom).
• Offline dan jaringan lambat. Tampilkan state yang benar alih-alih layar kosong. Reviewer menguji di Wi-Fi yang tidak stabil.
• Tanpa banner “download aplikasi kami” dan tanpa tautan yang mengirim pengguna ke situs web Anda untuk tugas inti.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Langkah 3: Tambahkan Capacitor

Dari root proyek web Anda:

bun add @capacitor/core
bun add -d @capacitor/cli
bunx cap init "My App" com.example.myapp --web-dir dist
bun add @capacitor/ios @capacitor/android
bun run build
bunx cap add ios
bunx cap add android

Gunakan folder output asli untuk --web-dir: dist untuk Vite, out untuk Next.js static export, .output/public untuk Nuxt generate, build untuk Create React App, dist/<project>/browser untuk Angular.

Bundle ID (com.example.myapp) bersifat permanen setelah aplikasi ada di store. Gunakan reverse domain yang Anda kendalikan.

Anda capacitor.config.ts sekarang terlihat seperti:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'My App',
  webDir: 'dist',
};

export default config;

Capacitor 8 membuat proyek iOS dengan Swift Package Manager secara default, jadi Anda tidak perlu CocoaPods. Setiap kali Anda mengubah web code:

bun run build
bunx cap sync

Jalankan:

bunx cap run ios
bunx cap run android

Commit ios/ dan android/ folder. Ini adalah source code yang akan Anda edit (izin, ikon, penandatanganan). Untuk informasi lebih lanjut, lihat betapa mudahnya mengubah web app menjadi mobile app dengan Capacitor, dan jika Anda membangun dengan tool AI, panduan Lovable ke mobile.

Langkah 4: Tambahkan fitur native agar layak masuk app

Pedoman Apple 4.2 (Minimum Functionality) menolak app yang hanya berupa website di dalam shell. Anda tidak butuh puluhan fitur native, tapi app harus berperilaku seperti app sungguhan. Tambahan umum yang berguna:

Contoh: tampilkan native share sheet alih-alih tombol “salin tautan”.

import { Share } from '@capacitor/share';
import { Capacitor } from '@capacitor/core';

export async function shareLink(url: string, title: string) {
  if (Capacitor.isNativePlatform()) {
    await Share.share({ title, url });
  } else {
    await navigator.clipboard.writeText(url);
  }
}

Jika Anda menjual konten digital atau langganan, rencanakan pembayaran sekarang. Apple dan Google mensyaratkan sistem in-app purchase mereka untuk barang digital dalam kebanyakan kasus. Di US App Store, aplikasi juga dapat menautkan ke checkout web eksternal setelah putusan pengadilan 2025; wilayah lain memiliki aturan masing-masing. Barang fisik dan layanan (pengiriman, tumpangan) dapat menggunakan Stripe atau penyedia pembayaran apa pun. Lihat in-app purchases dengan Capacitor.

Katalog lengkap plugin Capgo ada di halaman plugin.

Langkah 5: Ikon, splash screen, dan permission string

Generate semua ukuran ikon dan splash dari dua gambar sumber:

bun add -d @capacitor/assets
# assets/icon.png 1024x1024, assets/splash.png 2732x2732
bunx capacitor-assets generate

Di iOS, setiap permission yang Anda gunakan memerlukan usage description di ios/App/App/Info.plist, atau aplikasi akan crash saat meminta izin dan Apple akan menolaknya:

<key>NSCameraUsageDescription</key>
<string>Take a photo of your receipt to attach it to an expense.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Choose receipt photos from your library.</string>

Tuliskan alasan yang spesifik. “Aplikasi ini membutuhkan kamera” akan ditolak.

Di Android, plugin menambahkan sebagian besar permission ke manifest secara otomatis. Hapus permission yang tidak Anda gunakan; Google meminta Anda untuk menjustifikasi permission sensitif.

Juga tambahkan manifest privasi (PrivacyInfo.xcprivacy) jika code Anda menggunakan API yang memerlukan alasan. Lihat panduan privacy manifest untuk aplikasi iOS.

Langkah 6: Siapkan signing

iOS. Anda memerlukan Apple Distribution certificate (dengan private key-nya, biasanya diekspor sebagai .p12) dan provisioning profile App Store Connect untuk bundle ID Anda. Xcode dapat membuatnya secara otomatis, atau Anda bisa membuatnya sendiri, bahkan tanpa Mac. Baca Penjelasan sertifikat iOS dan provisioning profile; iOS certificate generator kami menangani langkah CSR di browser.

Android. Buat upload keystore dan simpan backup-nya. Google Play menggunakan Play App Signing, jadi Google memegang kunci penandatanganan aplikasi akhir, dan Anda menandatangani upload dengan kunci Anda.

keytool -genkeypair -v -keystore upload-keystore.jks -alias upload \
  -keyalg RSA -keysize 2048 -validity 10000

Atau gunakan Generator keystore Android.

Langkah 7: Build release binaries

Lokal

iOS (di Mac dengan Xcode 26, wajib untuk upload ke App Store mulai April 2026):

1. bunx cap open ios
2. Pilih Aplikasi target, atur versi dan nomor build, lalu pilih tim Anda di bagian Signing & Capabilities.
3. Pilih Perangkat iOS apa pun (arm64), lalu Produk > Arsip.
4. Di Organizer, Distribusi Aplikasi > App Store Connect > Upload.

Android:

bun run build
bunx cap sync android
cd android
./gradlew bundleRelease

AAB ada di android/app/build/outputs/bundle/release/. Konfigurasikan signingConfigs di android/app/build.gradle dengan keystore Anda, memuat kata sandi dari variabel lingkungan.

Pastikan targetSdkVersion adalah 36. Sejak 31 Agustus 2026, Google Play mewajibkan aplikasi baru dan pembaruan untuk menargetkan Android 16 (API 36), yang merupakan default Capacitor 8.

In the cloud

Jika Anda tidak punya Mac, atau ingin build yang reproducible dari CI, Build Capgo melakukan build kedua platform di mesin hosted dan bisa langsung upload ke TestFlight dan Google Play:

bunx @capgo/cli@latest build credentials save --appId com.example.myapp --platform ios
bunx @capgo/cli@latest build credentials save --appId com.example.myapp --platform android
bunx @capgo/cli@latest build request com.example.myapp --platform ios --path .
bunx @capgo/cli@latest build request com.example.myapp --platform android --path .

Kredensial hanya digunakan untuk proses build dan tidak disimpan di server Capgo. Lihat Dokumentasi Build Capgo.

Langkah 8: Distribusikan ke tester

Pasang build di ponsel asli sebelum orang di Apple atau Google melihatnya.

• iOS: upload ke TestFlight. Tester internal (hingga 100 anggota tim) langsung mendapatkannya setelah diproses; tester eksternal (hingga 10.000) setelah Beta App Review singkat.
• Android: buat rilis internal testing di Play Console dan bagikan link opt-in.

Uji sign-up dan login, pembayaran di sandbox, push notifications, perilaku offline, keyboard yang menutupi input, dan perilaku tombol back di Android. Detail tiap opsi: cara mendistribusikan aplikasi iOS dan Android ke tester.

Langkah 9: Jalankan closed test Google Play (akun personal baru)

Jika akun Play Anda adalah akun personal yang dibuat setelah 13 November 2023, Anda tidak bisa publish ke production sebelum menjalankan closed test dengan minimal 12 tester yang ikut serta selama 14 hari berturut-turut. Setelah itu, ajukan akses production di dashboard Play Console, yang biasanya ditinjau Google dalam waktu seminggu.

Mulai proses ini segera setelah Anda punya Android build yang layak. Gunakan Google Group sebagai daftar tester agar orang bisa bergabung sendiri. Rilis update selama 14 hari itu dan kumpulkan feedback, karena Google akan menanyakan apa yang Anda pelajari. Akun organisasi bebas dari aturan ini.

Langkah 10: Siapkan store listing dan submit

Anda butuh hal berikut untuk kedua store: nama app, deskripsi, screenshot dalam ukuran yang diterima, icon, URL privacy policy, privacy disclosures (Apple App Privacy dan Google Data safety), kuesioner rating usia, kontak support, dan akun demo jika app memiliki login. Google juga butuh feature graphic 1024 x 500. Spesifikasi dan batasannya: cara menyiapkan listing App Store dan Google Play Anda.

Submit di iOS: di App Store Connect, buat versinya, pilih TestFlight build, isi App Review Information (akun demo, catatan), lalu klik Kirim untuk Ditinjau, lalu Kirim.

Mengirim di Android: buat production release dengan AAB (atau promosikan yang sudah diuji dari testing track), lengkapi setiap Konten aplikasi deklarasi, atur negara, dan kirim untuk review.

Penolakan yang paling sering dialami web app:

1. 4.2 Fungsionalitas Minimum: aplikasinya hanya berupa situs web Anda. Tambahkan nilai native dan hapus UI yang mirip browser.
2. Login wajib tetapi tidak ada akun demo, atau akunnya tidak berfungsi.
3. Tidak ada opsi login yang fokus pada privasi saat Anda menawarkan login Google atau Facebook di iOS. Guideline 4.8 mewajibkan opsi setara yang membatasi pengumpulan data; Sign in with Apple adalah pilihan umum.
4. Tidak ada fitur hapus akun di dalam aplikasi saat pengguna bisa membuat akun.
5. Pembelian digital melalui Stripe di mana in-app purchase diwajibkan.
6. Layout iPad yang rusak karena proyek mendukung iPad secara default.
7. String izin yang hilang atau tidak jelas.

Kami panduan review aplikasi pertama kali dan Panduan submission aplikasi iOS bahas setiap poin secara mendalam.

Langkah 11: Kirim update tanpa menunggu review

Setelah peluncuran, sebagian besar perubahan Anda masih akan ada di web code. Daripada membuat build store baru untuk setiap perbaikan, tambahkan live updates. Updater Capgo mengunduh bundle web baru dari Capgo dan menerapkannya saat peluncuran berikutnya, dengan rollback otomatis jika bundle baru gagal start.

bun add @capgo/capacitor-updater
bunx cap sync
bunx @capgo/cli@latest init

Panggil notifyAppReady() saat aplikasi Anda sudah berjalan sehingga updater tahu bahwa bundle dalam kondisi sehat:

import { CapacitorUpdater } from '@capgo/capacitor-updater';

CapacitorUpdater.notifyAppReady();

Setelah itu, setiap rilis web code cukup satu perintah:

bun run build
bunx @capgo/cli@latest bundle upload --channel production

Kedua store mengizinkan ini untuk code yang diinterpretasikan, selama update tidak mengubah tujuan utama aplikasi atau melewati aturan pembayaran mereka. Perubahan native (plugin baru, izin baru, upgrade Capacitor) tetap harus melalui store. Baca selengkapnya di Live updates Capgo dan dokumentasi updater.

Tambahkan plugin sebelum submit pertama ke store. Plugin harus ada di binary yang diinstal pengguna, jika tidak, live update pertama Anda hanya bisa menjangkau pengguna setelah rilis store kedua.

Terakhir, otomatiskan: build dan upload setiap kali ada tag dari GitHub Actions atau GitLab CI, push live update setiap kali ada merge ke main, dan simpan rilis native untuk perubahan native.

Checklist pra-peluncuran

• Akun Apple dan Google disetujui, perjanjian diterima
• App berfungsi offline atau menampilkan status offline yang jelas
• Safe areas, keyboard, dan tombol back Android sudah ditangani
• Setidaknya beberapa fitur native yang tidak bisa diberikan website
• Ikon, splash, permission strings, privacy manifest
• Distribution certificate, profil App Store, upload keystore sudah di-backup
• Target SDK 36 di Android, build dengan Xcode 26 di iOS
• TestFlight dan Play internal testing sudah dilakukan di perangkat fisik
• Google Play closed test selesai (akun personal)
• Listing di kedua store lengkap, akun demo sudah ditambahkan
• Hapus akun di dalam app jika user bisa sign up
• Plugin live updates sudah termasuk di binary pertama

Pemecahan Masalah

Layar putih saat startup. webDir menunjuk ke folder yang salah atau Anda lupa bunx cap sync setelah build. Periksa ios/App/App/public dan android/app/src/main/assets/public mengandung index.html.

Panggilan API gagal hanya di dalam aplikasi. CORS: izinkan capacitor://localhost dan https://localhost. Pastikan juga Anda tidak memanggil http:// URL, yang diblokir iOS secara default.

Routes 404 setelah refresh atau deep link. Gunakan router yang fallback ke index.html, atau hash routing untuk setup lama.

Error signing Xcode. Lihat daftar error di Penjelasan sertifikat iOS dan provisioning profile.

Build Gradle gagal setelah upgrade. Capacitor 8 butuh Android Studio Otter (2025.2.1) atau yang lebih baru dan JDK 21, seperti yang tertera di panduan upgrade Capacitor 8. Untuk error Gradle lainnya, lihat cara mengatasi error build Android di Capacitor.

Upload Google Play ditolak untuk target SDK. Atur targetSdkVersion = 36 di android/variables.gradle.