In App Browser plugin Capacitor

Menggunakan @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser membuka konten web eksternal dari aplikasi Capacitor. Gunakan open() untuk tampilan browser platform, atau openWebView() saat aplikasi Anda butuh WebView native terkelola dengan ukuran, toolbar, pesan, script, download, proxy, kontrol popup, penyimpanan privat, atau UI Ionic di atas halaman.

Instal

npm install @capgo/capacitor-inappbrowser
npx cap sync

Apa yang Diekspos Plugin Ini

• Alur browser sistem menggunakan Chrome Custom Tabs di Android dan SFSafariViewController di iOS.
• WebView terkelola yang ukurannya bisa diatur, disembunyikan, ditampilkan, dipindah ke belakang aplikasi Capacitor, dan dimunculkan kembali ke depan.
• Penerusan klik, sentuhan, dan scroll dengan dispatchInputEvent() saat UI aplikasi berada di atas browser.
• Browser layar parsial di mana ketukan di luar frame WebView native akan diteruskan ke aplikasi Capacitor di Android dan iOS.
• Pembersihan cookie, cache, dan seluruh data browsing dengan persistWebViewData, clearCookies, clearAllCookies, clearCache, dan clearAllBrowsingData.
• Komunikasi App-ke-page dengan postMessage(), komunikasi page-ke-app dengan window.mobileApp.postMessage(...), serta injeksi script dengan executeScript().
• Penanganan download, aturan proxy native-first, kontrol popup, dukungan Google Pay, _blank penanganan link, dan instance browser preloadable yang tersembunyi.

Kasus Penggunaan Umum

Letakkan UI App di Atas Live Browser

import { InAppBrowser } from '@capgo/capacitor-inappbrowser';

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/checkout',
  toBack: true,
  transparentBackground: true,
});

await InAppBrowser.dispatchInputEvent({
  id,
  type: 'click',
  x: 160,
  y: 420,
});

await InAppBrowser.bringToFront({ id });

Gunakan ini untuk overlay checkout, alur pembayaran berbasis browser, alur panduan bantuan, atau fitur apa pun yang membutuhkan kontrol Ionic tetap berada di atas konten web.

Tetap Bisa Klik App di Sekitar Browser Sheet

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/offers',
  height: window.innerHeight - 200,
  y: 0,
});

await InAppBrowser.updateDimensions({ id, height: window.innerHeight });

Browser berukuran custom hanya menangkap sentuhan di dalam frame-nya. Sisa area app yang terlihat tetap bisa di-tap di Android dan iOS.

Hindari Sesi Web yang Persisten

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/login',
  persistWebViewData: false,
});

await InAppBrowser.clearAllBrowsingData();
await InAppBrowser.close({ id });

Gunakan ini untuk ganti akun, testing checkout, impersonasi support, atau alur auth di mana cookie, cache, local storage, dan IndexedDB tidak boleh bertahan lebih lama dari yang dibutuhkan.

Preload dan Swap Multiple WebViews

const first = await InAppBrowser.openWebView({ url: 'https://example.com/a', hidden: true });
const second = await InAppBrowser.openWebView({ url: 'https://example.com/b', hidden: true });

await InAppBrowser.show({ id: first.id });
await InAppBrowser.hide({ id: first.id });
await InAppBrowser.show({ id: second.id });

Instance tersembunyi menjaga state tetap tersedia sambil menghindari native overlay yang menghalangi sentuhan pada app.

Sematkan Web App Canggih

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/portal',
  handleDownloads: true,
  openBlankTargetInWebView: true,
  hiddenPopupWindow: true,
  outboundProxyRules: [
    {
      urlRegex: '^https://example\\.com/api/',
      action: 'delegateToJs',
    },
  ],
});

await InAppBrowser.postMessage({
  id,
  detail: { source: 'app', action: 'refresh' },
});

Gunakan pola ini untuk portal dokumen, alur upload, helpdesk, video call, halaman Google Pay, atau web app interaktif yang butuh kontrol native app tanpa keluar dari app shell.

Referensi Lengkap

• GitHub: https://github.com/Cap-go/capacitor-inappbrowser/
• Dokumentasi: /docs/plugins/inappbrowser/

Lanjutkan dari Menggunakan @capgo/capacitor-inappbrowser

Jika Anda menggunakan Menggunakan @capgo/capacitor-inappbrowser untuk merencanakan pekerjaan plugin native, hubungkan dengan @capgo/capacitor-inappbrowser untuk detail implementasi di @capgo/capacitor-inappbrowser, Panduan Memulai untuk detail implementasi di Getting Started, Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo, Plugin Capacitor oleh Capgo untuk detail implementasi di Plugin Capacitor oleh Capgo, dan Menambahkan atau Memperbarui Plugin untuk detail implementasi di bagian Menambahkan atau Memperbarui Plugin.