@capgo/capacitor-inappbrowser を使用すると、capgo アプリから外部の Web コンテンツを開くことができます。

@capgo/capacitor-inappbrowser opens external web content from a Capacitor app. Use open() for the platform browser surface, or openWebView() アプリが管理されたネイティブのWebビューにカスタムサイズ、ツールバー、メッセージ、スクリプト、ダウンロード、プロキシ、ポップアップ制御、プライベートストレージ、またはIonic UIをページの上にレイヤー化する必要がある場合。

インストール

npm install @capgo/capacitor-inappbrowser
npx cap sync

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

システムブラウザのフローはAndroidとiOSでChromeカスタムタブを使用します。 SFSafariViewController ネイティブのWebビューがサイズ、非表示、表示、__CAPGO_KEEP_0__アプリの後ろに移動、そして前面に戻すことができる管理されたWebビュー。
Managed WebViews that can be sized, hidden, shown, moved behind the Capacitor app, and brought back to the front.
ネイティブのWebビューのフレーム外のタップはAndroidとiOSで__CAPGO_KEEP_0__アプリに通過するパーシャルスクリーンブラウザ。 dispatchInputEvent() クッキー、キャッシュ、フルブラウジングデータのクリーンアップは、
Partial-screen browsers where taps outside the native WebView frame pass through to the Capacitor app on Android and iOS.
protectedTokens persistWebViewData, clearCookies, clearAllCookies, clearCachecookie, cache, and full browsing-data cleanup with clearAllBrowsingData.
, and postMessage()ページ間の通信と window.mobileApp.postMessage(...)、およびスクリプトのインジェクションと executeScript().
ダウンロードハンドリング、ネイティブファーストのプロキシルール、ポップアップの制御、Google Payのサポート _blank リンクハンドリング、および非表示のプリロード可能なブラウザインスタンス。

一般的な使用例

アプリのUIをライブブラウザの上に表示する

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

チェックアウトオーバーレイ、ブラウザバックアップの支払いフロー、ガイデッドサポートフロー、またはIonicコントロールがライブWebコンテンツの上に残る必要がある任意の機能に使用してください。

アプリのクリック可能な領域をブラウザシートの周りに維持する

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

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

カスタムサイズのブラウザは、フレーム内にのみタッチをキャプチャします。残りの表示アプリエリアは、AndroidとiOS両方でタップ可能です。

永続的なWebセッションを回避する

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

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

アカウント切り替え、チェックアウトテスト、サポートの擬似化、またはCookie、キャッシュ、ローカルストレージ、IndexedDBが必要とされる期間より長く存続しないようにする必要がある認証フローに使用してください。

複数の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 });

nativeアプリのタッチをブロックしないように、インスタンスの状態を保持する

高度な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/

@capgo/capacitor-inappbrowserを使用している場合

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowserを使用して ネイティブプラグインの作業を計画する場合、@capgo/capacitor-inappbrowserを接続してください。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowserを使用しています。 https://capgo.com/Cap-go/capacitor-inappbrowser/ 実装詳細については @capgo/capacitor-inappbrowser に Getting Started 実装詳細については Getting Started に Capgo プラグインディレクトリ実装詳細については Capgo プラグインディレクトリに Capacitor プラグイン ( Capgo によって提供) 実装詳細については Capacitor プラグイン ( Capgo によって提供) にプラグインの追加または更新実装詳細についてはプラグインの追加または更新に

In App Browser

インストールガイド: インストール可能ブラウザ