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 Ionic UI yang terlapis di atas halaman.

Instal

npm install @capgo/capacitor-inappbrowser
npx cap sync

Apa yang Dapat Diketahui Plugin Ini

• Alur browser sistem dengan Chrome Custom Tabs di 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, sentuhan, dan scroll dengan dispatchInputEvent() ketika UI aplikasi berada di atas browser.
• Browser layar sebagian di mana sentuhan di luar frame Pemandu Web asli dapat melewati 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 download, aturan proxy native-terlebih dahulu, kontrol popup, dukungan Google Pay, _blank , dan pengelolaan link, serta instance browser disembunyikan yang dapat dipreload.

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 perlu mengontrol kontrol di atas konten web yang aktif.

Tetapkan Aplikasi untuk Dapat Diklik di Sekitar Lembaran 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 Berubah

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 yang berpura-pura, atau alur autentikasi di mana cookie, cache, penyimpanan lokal, dan IndexedDB tidak boleh bertahan lebih lama dari yang dibutuhkan.

Muat Awal dan Ganti Banyak Instance WebView

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 pekerjaan plugin native, hubungkannya dengan @capgo/capacitor-inappbrowser untuk detail implementasi di @capgo/capacitor-inappbrowser, Mula-Mula untuk detail implementasi di Mula-Mula, Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo Plugin-Plugin Capacitor oleh Capgo untuk detail implementasi di Plugin-Plugin Capacitor oleh Capgo, dan Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin.