@capgo/capacitor-inappbrowserを使用

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

インストール

npm install @capgo/capacitor-inappbrowser
npx cap sync

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

AndroidでChrome Custom Tabsを使用したシステムブラウザフロー SFSafariViewController iOSで動作します。
サイズ、非表示、表示、移動、Capacitorアプリの後ろに移動して、前面に戻すことができるマネージドWebViews。
タップ、クリック、スクロールのフォワード機能は dispatchInputEvent() アプリのUIがブラウザの上にある場合の
部分スクリーンのブラウザでは、AndroidとiOSのネイティブWebViewの枠外のタップは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コンテンツの上に残る必要がある任意の機能に使用します。

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

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-__CAPGO_KEEP_1__-inappbrowserを使用している場合 Using @capgo/capacitor-inappbrowser Capacitor-__CAPGO_KEEP_1__-inappbrowserを使用して、ネイティブプラグインの作業計画を接続します。 @capgo/capacitor-inappbrowserの実装詳細 for the implementation detail in @capgo/capacitor-inappbrowser, Getting Startedの実装詳細 __CAPGO_KEEP_0__ プラグインディレクトリ Capgo Plugin Directory Capgo プラグインディレクトリ内での製品ワークフローについて Capacitor プラグインは Capgo によって提供されます Capacitor プラグインの実装詳細については Capacitor プラグインは Capgo によって提供されますプラグインの追加または更新プラグインの追加または更新の実装詳細については

インアプリブラウザ