Browser Dalam 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, proxy, kontrol popup, penyimpanan pribadi, atau UI Ionik yang terlapis di atas halaman.

Install

npm install @capgo/capacitor-inappbrowser
npx cap sync

Apa yang Dapat Diketahui Plugin Ini

• Aliran 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 ke depan.
• Klik, sentuh, dan scroll ke depan dengan dispatchInputEvent() ketika UI aplikasi berada di atas browser.
• Pengguna browser setengah layar di mana sentuhan di luar frame Pemandu Web asli akan melewati ke aplikasi Capacitor di Android dan iOS.
• Pembersihan cookie, cache, dan data browsing lengkap dengan persistWebViewData, clearCookies, clearAllCookies, clearCache, dan clearAllBrowsingData.
• Pengiriman data antara aplikasi dan halaman dengan postMessage(), komunikasi halaman ke aplikasi dengan window.mobileApp.postMessage(...), dan penginjeksian skrip dengan executeScript().
• Pengelolaan download, aturan proxy native pertama, kontrol popup, dukungan Google Pay, _blank pengelolaan tautan, dan instance browser disembunyikan yang dapat dipreload.

Penggunaan Umum

Tampilkan UI 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 dipandu, atau fitur mana pun di mana Ionic perlu mengontrol kontrol di atas konten web yang aktif.

Tetapkan Aplikasi 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 Berlangsung

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, impersonasi dukungan, atau alur autentikasi di mana cookie, cache, penyimpanan lokal, dan IndexedDB tidak boleh 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 });

Instans 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 kontrol 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, hubungkan dengan @capgo/capacitor-inappbrowser untuk detail implementasi di @capgo/capacitor-inappbrowser, Getting Started untuk detail implementasi di Getting Started, Capgo Plugin Directory 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.