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 Ionic 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 pada Android dan SFSafariViewController pada iOS.
WebView yang dapat diatur ukurannya, disembunyikan, ditampilkan, dipindahkan di belakang aplikasi Capacitor, dan dibawa ke depan.
Pengiriman klik, sentuh, dan geser dengan dispatchInputEvent() ketika UI aplikasi berada di atas browser.
Ponsel Android dan iOS dengan browser layar parsial di mana sentuhan di luar frame WebView asli memungkinkan aplikasi Capacitor untuk menerima perintah.
Pembersihan cookie, cache, dan data browsing lengkap 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 pertama, kontrol popup, dukungan Google Pay, _blank Pengaturan link, dan instance browser tersembunyi yang dapat dipreload.

Kasus 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 diarahkan, atau fitur mana pun di mana Ionic memerlukan kontrol untuk tetap di atas konten web yang aktif.

Tetapkan Aplikasi untuk 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 });

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

Menghindari Sesi Web yang Berlangsung Terus

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

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

Pilih ini untuk mengganti akun, menguji checkout, mengimpersonasi dukungan, atau aliran autentikasi di mana cookie, cache, penyimpanan lokal, dan IndexedDB tidak boleh bertahan lebih lama dari yang dibutuhkan.

Mengumpulkan dan Mengganti Banyak View Web

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 tetap memiliki status tersedia sambil menghindari overlay native yang menghalangi sentuhan aplikasi.

Melekatkan 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' },
});

Pilih pola ini untuk portal dokumen, aliran unggah, meja dukungan, panggilan video, halaman Google Pay, atau aplikasi web interaktif yang memerlukan kendali aplikasi native tanpa meninggalkan shell aplikasi.

Referensi Lengkap

https://GitHub.com/Cap-go/__CAPGO_KEEP_1__-inappbrowser/ https://github.com/Cap-go/capacitor-inappbrowser/
Teruskan dari Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser

https://capgo.com/Cap-go/capacitor-inappbrowser/

If Anda menggunakan Menggunakan @capgo/capacitor-inappbrowser untuk merencanakan pekerjaan plugin native, hubungkan dengan @capgo/capacitor-inappbrowser untuk detail implementasi di @capgo/capacitor-inappbrowser, Mulai Membuat untuk detail implementasi di Mulai Membuat, Daftar Direktori Plugin Capgo untuk alur kerja produk di Daftar Direktori Plugin Capgo, dan Plugin-Plugin Capacitor oleh Capgo untuk detail implementasi di Plugin-Plugin Capacitor oleh Capgo, serta Mengambah atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin.

Browser Aplikasi

Tutorial pada Browser Aplikasi