Browser Aplikasi

Menggunakan @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser membuka konten web eksternal dari sebuah Capacitor aplikasi. Gunakan open() untuk permukaan browser platform, atau openWebView() ketika aplikasi Anda memerlukan WebView native yang diatur dengan ukuran, toolbar, pesan, skrip, download, proxying, kontrol popup, penyimpanan pribadi, atau UI Ionik yang terlapis di atas halaman.

Instal

npm install @capgo/capacitor-inappbrowser
npx cap sync

Apa yang Dapat Diklik

• Alur browser sistem dengan Chrome Custom Tabs pada Android dan SFSafariViewController di iOS.
• Pemandu Web yang Dikelola yang dapat disesuaikan ukurannya, disembunyikan, ditampilkan, dipindahkan di belakang aplikasi Capacitor , dan dibawa kembali ke depan.
• Pengiriman klik, sentuh, dan gulir ke depan dengan dispatchInputEvent() ketika UI aplikasi berada di atas browser.
• Browser layar setengah yang dapat menyalurkan sentuhan di luar frame Pemandu Web asli ke aplikasi Capacitor di Android dan iOS.
• Pembersihan cookie, cache, dan data browsing penuh dengan persistWebViewData, clearCookies, clearAllCookies, clearCache, dan clearAllBrowsingData.
• Komunikasi aplikasi ke halaman dengan postMessage(), komunikasi halaman ke aplikasi dengan window.mobileApp.postMessage(...), dan penginjeksian skrip dengan executeScript().
• Pengaturan pengunduhan, aturan proxy native pertama, kontrol popup, dukungan Google Pay, _blank pengaturan link, dan instance browser tersembunyi yang dapat dipreload.

Kasus Penggunaan Umum

Tampilkan Antarmuka Aplikasi di Atas Browser yang Aktif

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 pembayaran, alur pembayaran yang didukung browser, alur dukungan yang diarahkan, atau fitur mana pun di mana Ionic mengontrol perlu tetap di atas konten web yang aktif.

Jaga Aplikasi Tetap Klik di Sekitar Lembar Browser

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

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

Browser yang disesuaikan ukurannya hanya menangkap sentuhan di dalam frame-nya. Area aplikasi yang masih terlihat tetap dapat diklik di Android dan iOS.

Hindari Sesi Web yang Tidak Perlu Dihapus

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

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

Gunakan ini untuk switching akun, pengujian pembayaran, dukungan impersonasi, atau alur autentikasi di mana cookies, cache, penyimpanan lokal, dan IndexedDB tidak perlu bertahan lebih lama dari yang dibutuhkan.

Muat Awal dan Ganti 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 });

Instansi yang disembunyikan menjaga keadaan mereka tersedia sambil menghindari overlay native yang menghalangi sentuhan aplikasi.

Integrasikan Aplikasi Web yang 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 unggah, meja dukungan, panggilan video, halaman Google Pay, atau aplikasi web interaktif yang membutuhkan kendali aplikasi native tanpa meninggalkan shell aplikasi.

Referensi Lengkap

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

Teruskan dari Menggunakan @capgo/capacitor-inappbrowser

Jika Anda menggunakan Menggunakan @capgo/capacitor-inappbrowser untuk merencanakan kerja plugin native, hubungkannya dengan @capgo/capacitor-inappbrowser untuk detail implementasi di @capgo/capacitor-inappbrowser, Mengawali untuk detail implementasi di Mengawali, Direktori Plugin Capgo untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo, dan Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin.