インアプリブラウザ Capacitor プラグイン

capgo/@capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser Capacitorアプリから外部のWebコンテンツを開きます。使用 open() プラットフォームブラウザ表面の場合、または openWebView() アプリが管理されたネイティブWebViewを必要とする場合、またはカスタムサイズ、ツールバー、メッセージ、スクリプト、ダウンロード、プロキシ、ポップアップ制御、プライベートストレージ、またはIonic UIをページの上にレイヤー化する必要がある場合

インストール

npm install @capgo/capacitor-inappbrowser
npx cap sync

このプラグインが公開するもの

• AndroidとiOSでChromeカスタムタブを使用したシステムブラウザのフロー SFSafariViewController AndroidとiOSで。
• Capacitorアプリの下に表示、非表示、移動、表示に戻すことができるサイズ変更可能なマネージドウェブビュー
• アプリのUIがブラウザの上にある場合のクリック、タッチ、スクロールのフォワーディング dispatchInputEvent() アプリのUIはブラウザの上に表示されます。
• 部分スクリーンのブラウザです。タップ外側のnative WebView フレームは、AndroidとiOSのCapacitorアプリに通過します。
• , persistWebViewData, clearCookies, clearAllCookies, clearCacheアプリからページへの通信 clearAllBrowsingData.
• , postMessage()ページからアプリへの通信 window.mobileApp.postMessage(...)Live Update executeScript().
• Cloudflare _blank Capacitor

GitHub

Capgo

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

code

API

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/offers',
  height: window.innerHeight - 200,
  y: 0,
});

await InAppBrowser.updateDimensions({ id, height: window.innerHeight });

SDK

CLI

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

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

npm

bun

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

Download handling, native-first proxy rules, popup control, Google Pay support, link handling, and hidden preloadable browser instances.

Webアプリを埋め込む

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

ドキュメントポータル、ファイルアップロードフロー、サポートデスク、ビデオコール、Google Payページ、またはアプリ内でアプリ外に移動せずにネイティブアプリ制御が必要なインタラクティブなWebアプリ向けのパターン

フルリファレンス

• GitHub: https://github.com/Cap-go/capacitor-inappbrowser/
• ドキュメント: /docs/plugins/inappbrowser/

Using @capgo/capacitor-inappbrowser

Capacitorを使用している場合 Using @capgo/capacitor-inappbrowser Capacitorのネイティブプラグイン作業を計画するには、を接続する @capgo/capacitor-inappbrowserを使用して、@capgo/capacitor-inappbrowserの実装詳細を確認する Using @capgo/capacitor-inappbrowser 導入の始め方 導入の詳細については、導入の始め方を参照してください。 Capgo プラグインディレクトリ プラグインディレクトリの詳細については、Capgo プラグインディレクトリを参照してください。 Capacitor Capgo for Capacitor の実装詳細については、Capgo によって提供されるプラグインを参照してください。 プラグインの追加または更新 プラグインの詳細については、プラグインの追加または更新を参照してください。