Browser Aplikasi Plugin Capacitor

Memakai @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 antarmuka UI Ionik yang terlapis di atas halaman.

Install

npm install @capgo/capacitor-inappbrowser
npx cap sync

Apa yang Dapat Diklik

• Aliran browser sistem dengan Chrome Custom Tabs pada Android dan SFSafariViewController pada iOS.
• WebView yang diatur yang dapat diukur, disembunyikan, ditampilkan, dipindahkan di belakang aplikasi Capacitor, dan dibawa ke depan.
• Forward klik, sentuh, dan scroll dengan dispatchInputEvent() ketika antarmuka UI aplikasi berada di atas browser.
• Penggunaan browser layar setengah yang dapat menyalurkan sentuhan di luar frame WebView native ke aplikasi Capacitor pada Android dan iOS.
• Pembersihan cookie, cache, dan data browsing penuh dengan persistWebViewData, clearCookies, clearAllCookies, clearCache, dan clearAllBrowsingData.
• Komunikasi antara aplikasi dan halaman dengan postMessage(), komunikasi antara halaman dan aplikasi dengan window.mobileApp.postMessage(...), dan penginjeksian skrip dengan executeScript().
• Pengaturan download, aturan proxy native pertama, kontrol popup, dukungan Google Pay, _blank Pengaturan link, dan instance browser tersembunyi yang dapat dipreload.

Kasus Penggunaan Umum

Tempatkan 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, aliran dukungan browser, atau fitur mana pun di mana Ionic perlu mengontrol konten web yang hidup.

Pertahankan Aplikasi Tetap Klik di Sekitar Sheet 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 mengganti akun, pengujian checkout, impersonasi dukungan, atau aliran 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 tersembunyi 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, aliran 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/

Lanjutkan dari Menggunakan @capgo/capacitor-inappbrowser

Jika Anda menggunakan Gunakan @capgo/capacitor-inappbrowser untuk merencanakan pekerjaan plugin native, hubungkannya dengan @capgo/capacitor-inappbrowser untuk detail implementasi di @capgo/capacitor-inappbrowser, Panduan Pemula untuk detail implementasi di Panduan Pemula, Daftar Plugin @Capgo untuk alur kerja produk di Daftar Plugin @Capgo, Plugin @Capacitor oleh @Capgo untuk detail implementasi di Plugin @Capacitor oleh @Capgo, dan Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin.