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

Install

npm install @capgo/capacitor-inappbrowser
npx cap sync

Apa yang Dapat Dikembangkan oleh Plugin Ini

• Alur browser sistem dengan Chrome Custom Tabs pada Android dan SFSafariViewController On iOS.
• Pemandangan 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.
• Penggunaan browser layar setengah yang dapat menyalin sentuhan di luar frame WebView asli 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()Pengiriman data antara halaman dan aplikasi dengan window.mobileApp.postMessage(...)Pengirisan skrip dengan executeScript().
• Pengelolaan download, aturan proxy native pertama, kontrol popup, dukungan Google Pay, _blank pengelolaan tautan, dan instance browser yang dapat dipreload secara rahasia.

Kasus Penggunaan Umum

Tempatkan 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 });

Pakai 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.

Jaga Aplikasi Tetap Klikan 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 Terus

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

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

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

Pemuatan 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 tetap memiliki status yang 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' },
});

Pakai 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 pekerjaan plugin native, hubungkannya dengan @capgo/capacitor-inappbrowser untuk detail implementasi di @capgo/capacitor-inappbrowser Berikut untuk detail implementasi di Getting Started Capgo Direktori Plugin 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.