@capgo/capacitor-inappbrowser

Ikhtisar

@capgo/capacitor-inappbrowser memberikan dua jalur browser untuk aplikasi Capacitor: open() untuk pengalaman browser sistem dan openWebView() untuk WebView native terkelola yang ukurannya, visibilitas, pesan, skrip, proxy, dan layer-nya bisa diatur dengan Ionic UI.

Gunakan saat halaman butuh lebih dari sekadar browser eksternal: alur OAuth dan checkout, portal dukungan tersemat, layar pembayaran, video call, portal dokumen, web app interaktif, atau alur apa pun yang butuh kontrol native di sekitar konten web.

Nama package telah diubah.

Kasus Penggunaan Umum

• Tampilkan UI Ionic atau Capacitor di atas halaman browser live dengan toBack, sendToBack(), bringToFront(), transparentBackground, dan dispatchInputEvent().
• Buat browser layar parsial, bottom sheets, dan webview picture-in-picture dengan width, height, x, y, dan updateDimensions().
• Biarkan pengguna mengetuk app Capacitor di luar frame browser custom-size pada Android dan iOS.
• Jalankan alur checkout, login, support, atau ganti akun tanpa penyimpanan website yang persisten menggunakan persistWebViewData: false dan clearAllBrowsingData().
• Tetap muat beberapa instance browser dengan hidden, hide(), dan show() sambil menjaga state halaman tetap aman.
• Embed web app canggih yang butuh request proxying, upload file, download, kontrol popup, dukungan Google Pay, _blank penanganan link, dan messaging dari app ke page.

Kemampuan Utama

• open - Membuka URL di Chrome Custom Tabs pada Android atau SFSafariViewController pada iOS.
• openWebView - Membuka native WebView terkelola dengan custom toolbar, sizing, navigasi native, messaging, scripting, proxy, download, popup, dan kontrol data.
• sendToBack / bringToFront - Memindahkan browser terkelola ke belakang atau di atas host WebView Capacitor.
• dispatchInputEvent - Meneruskan event klik, sentuh, dan scroll ke browser yang berada di balik UI aplikasi native.
• updateDimensions - Mengubah ukuran dan posisi WebView terkelola tanpa memuat ulang halaman.
• hide / show - Menjaga WebView terkelola tetap dimuat saat menghapus atau memulihkan tampilan native-nya.
• postMessage / executeScript - Menghubungkan aplikasi Capacitor dengan JavaScript yang berjalan di dalam halaman terkelola.
• clearAllBrowsingData / persistWebViewData - Mengontrol cookie, cache, storage, IndexedDB, dan persistensi sesi.
• handleDownloads, aturan proxy, dan event popup - Mendukung portal dokumen, alur upload, halaman pembayaran, dan web app tersemat.

API Publik

Metode	Deskripsi
goBack	Navigasi kembali pada history WebView jika memungkinkan.
open	Buka URL di jendela baru secara fullscreen; di Android menggunakan Chrome Custom Tabs, di iOS menggunakan SFSafariViewController.
clearCookies	Hapus cookie URL saat id dilewatkan, berlaku untuk semua webview yang terbuka.
clearAllCookies	Hapus semua cookie saat id dilewatkan, berlaku untuk semua webview yang terbuka.
clearCache	Hapus cache saat id dilewatkan, berlaku untuk semua webview yang terbuka.
clearAllBrowsingData	Menghapus cookie, cache, local storage, session storage, IndexedDB, dan data browsing lainnya dari default store dan WebView yang dikelola.
getCookies	Ambil cookie untuk URL tertentu.
close	Tutup webview. Jika id dilewatkan, akan menutup webview yang sedang aktif.
hide	Sembunyikan webview tanpa menutupnya. Gunakan show() untuk menampilkannya kembali. Jika id dihapus, maka akan menargetkan webview yang aktif.
show	Menampilkan webview yang sebelumnya tersembunyi. Saat id dihapus, maka akan menargetkan webview yang aktif.
sendToBack	Memindahkan browser native ke belakang host WebView Capacitor agar UI aplikasi bisa muncul di atasnya.
bringToFront	Memindahkan browser yang tadinya di belakang host WebView kembali ke depan.
dispatchInputEvent	Mengirimkan input klik, sentuh, atau scroll ke browser yang dikelola; koordinat bersifat relatif terhadap viewport browser.
openWebView	Buka url di webview baru dengan toolbar dan fitur tambahan, seperti akses kamera, akses file, listen events, inject javascript, komunikasi dua arah, dll.
executeScript	Menginjeksi JavaScript code ke dalam jendela InAppBrowser. Saat id dihapus, akan dieksekusi di semua webview yang terbuka.
postMessage	Mengirimkan event ke webview (in-app browser). Listen di halaman dengan window.addEventListener('messageFromNative', listenerFunc). detail payload harus dapat diserialisasi ke JSON. Saat id dilewati, akan broadcast ke semua webview yang terbuka.
takeScreenshot	Mengambil screenshot viewport webview saat ini dalam format PNG. Saat id dilewati, akan menargetkan webview yang aktif.
setUrl	Mengatur URL webview. Saat id dilewati, akan menargetkan webview yang aktif.
addListener	Dengarkan perubahan URL, hanya untuk openWebView.
addListener	Dengarkan buttonNearDoneClick; payload berisi data webview id.
addListener	Dengarkan klik close hanya untuk openWebView.
addListener	Akan dipicu saat user klik tombol konfirmasi jika disclaimer diperlukan, berfungsi dengan openWebView shareDisclaimer dan closeModal.
addListener	Dipicu saat webview mengirimkan event kembali ke app. Gunakan window.mobileApp.postMessage(...) di dalam halaman, dan pastikan payload bersifat JSON-serializable.
addListener	Akan dipicu setiap kali tangkapan layar diambil melalui plugin API, tombol screenshot bawaan, atau JavaScript bridge yang disuntikkan.
addListener	Akan dipicu saat halaman dimuat.
addListener	Akan dipicu saat terjadi error pemuatan halaman.
addListener	Akan dipicu setelah penanganan download native menyimpan file secara lokal. Aktifkan ini dengan handleDownloads: true saat membuka webview.
addListener	Akan dipicu saat penanganan download native gagal. Aktifkan ini dengan handleDownloads: true saat membuka webview.
addListener	Akan dipicu setiap kali halaman membuka popup/jendela baru. Gunakan popup id yang dikembalikan dengan executeScript, postMessage, show, hide, dan close.
addListener	Dengarkan request proxied yang didelegasikan oleh native runtime. Lebih baik gunakan addProxyHandler() daripada memanggil ini secara langsung.
addListener	Dengarkan output console JavaScript yang dikeluarkan oleh halaman yang dikelola. Aktifkan ini dengan captureConsoleLogs: true saat membuka webview.
handleProxyRequest	Metode internal yang digunakan oleh addProxyHandler() untuk mengirim keputusan proxy kembali ke native. Teruskan yang asli phase saat membalas secara manual proxyRequest listener.
removeAllListeners	Hapus semua listener plugin ini.
reload	Reload halaman web saat ini.
updateDimensions	Perbarui dimensi webview. Memungkinkan perubahan ukuran dan posisi webview saat runtime. Jika id dihilangkan, akan menargetkan webview yang aktif.
setEnabledSafeTopMargin	Mengatur margin atas safe area webview saat runtime. Jika id dihilangkan, akan menargetkan webview yang aktif. Pada Web, metode ini tidak melakukan apa-apa (no-op) dan selesai tanpa mengubah layout.
setEnabledSafeBottomMargin	Mengatur margin bawah safe area webview saat runtime. Jika id jika dikosongkan, akan menargetkan webview yang aktif. Pada Web, metode ini tidak melakukan apa pun (no-op) dan selesai tanpa mengubah layout.
openSecureWindow	Membuka jendela OAuth2 yang aman. Pada web, kembalikan URL redirect melalui BroadcastChannel; pada mobile, daftarkan custom redirect URI di konfigurasi aplikasi Anda. Lihat panduan getting-started untuk contoh lengkap HTML, Info.plist, dan AndroidManifest.

Nilai Referensi

Gunakan nilai-nilai ini dengan opsi toolbar saat membuka in-app browser atau WebView.

Tipe Toolbar

Nilai	Pengguna akan menemukan
activity	Toolbar sederhana dengan kontrol close dan share.
compact	Toolbar sederhana dengan kontrol close.
navigation	Toolbar navigasi lengkap dengan kontrol back dan forward.
blank	Tanpa toolbar.

Sumber Kebenaran

Referensi ini disinkronkan dari src/definitions.ts di capacitor-inappbrowser.

Lanjutkan dari @capgo/capacitor-inappbrowser

Jika Anda menggunakan @capgo/capacitor-inappbrowser untuk merencanakan pekerjaan plugin native, hubungkan dengan Menggunakan @capgo/capacitor-inappbrowser untuk kapabilitas native saat menggunakan @capgo/capacitor-inappbrowser, Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo, Plugin Capacitor oleh Capgo untuk detail implementasi pada Capacitor Plugins oleh Capgo Menambahkan atau Memperbarui Plugin untuk detail implementasi di Menambahkan atau Memperbarui Plugin, dan Alternatif Plugin Ionic Enterprise untuk alur kerja produk dalam Alternatif Plugin Ionic Enterprise.