@capgo/capacitor-inappbrowserを使用

@capgo/capacitor-inappbrowser 外部のウェブコンテンツを開くために、Capacitorアプリから始まる open() プラットフォームブラウザの表面、または openWebView() アプリがカスタムサイズ、ツールバー、メッセージ、スクリプト、ダウンロード、プロキシ、ポップアップ制御、プライベートストレージ、またはイオニックUIをレイヤー化したページを必要とする場合

インストール

npm install @capgo/capacitor-inappbrowser
npx cap sync

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

AndroidでChromeカスタムタブを使用したシステムブラウザフロー SFSafariViewController iOSで動作します。
サイズ、非表示、表示、後方に移動して、Capacitorアプリに戻すことができる、管理されたWebビュー。
クリック、タッチ、スクロールのフォワード機能は dispatchInputEvent() アプリのUIがブラウザの上に表示されている場合の
部分スクリーンのブラウザでは、AndroidおよびiOSのネイティブWebビューの枠外のタップはCapacitorアプリに通過します。
クッキー、キャッシュ、フルブラウジングデータのクリーンアップは persistWebViewData, clearCookies, clearAllCookies, clearCache、および clearAllBrowsingData.
アプリからページへの通信は 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コンテンツの上に残る必要がある任意の機能に使用します。

アプリのUIをブラウザシートの周りにクリック可能に保つ

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

非表示のインスタンスは、ネイティブオーバーレイがアプリのタッチをブロックすることなく、状態を保持することができます。

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

Keep going from Using @capgo/capacitor-inappbrowser

Capacitorを使用している場合 Using @capgo/capacitor-inappbrowser Capacitorを使用してネイティブプラグインの作業を計画する場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowserと接続してください @capgo/capacitor-inappbrowserの実装詳細 for the implementation detail in @capgo/capacitor-inappbrowser, Capacitorプラグインディレクトリ __CAPGO_KEEP_0__ Plugin Directory Capgo Plugin Directory Capacitor In-App Browserプラグインのワークフローについては、Capgo プラグインディレクトリで Capacitor プラグインをCapgoで Capacitor In-App Browserプラグインの実装詳細については、Capacitor プラグインをCapgoで、そしてプラグインの追加または更新 Capacitor In-App Browserプラグインの実装詳細については、プラグインの追加または更新で

インアプリブラウザ