@capgo/capacitor-inappbrowserを使用すると、

@capgo/capacitor-inappbrowser 外部のウェブコンテンツを開くために、Capacitorアプリから外部ブラウザが開きます。 open() プラットフォームブラウザの表面、または openWebView() アプリがブラウザの表面を必要とする場合、または

ブラウザの表面のカスタムサイズ、ツールバー、メッセージ、スクリプト、ダウンロード、プロキシ、ポップアップの制御、プライベートストレージ、またはIonic UIのレイヤーをページの上に配置する必要がある場合に、

npm install @capgo/capacitor-inappbrowser
npx cap sync

インストール

このプラグインが公開するものは何かを説明します。システムブラウザフローはAndroidでChromeカスタムタブを使用します。 SFSafariViewController iOS上で動作します。
サイズ、非表示、表示、Capacitorアプリの後ろに移動、そして前面に戻すことができる管理されたWebViewsです。
Click, touch, and scroll forwarding with dispatchInputEvent() アプリのUIがブラウザの上にあるときのクリック、タッチ、スクロールのフォワード
AndroidとiOSの両方で、部分スクリーンのブラウザでは、ネイティブWebviewフレームの外側のタップはCapacitorアプリに通過します。
Cookie、キャッシュ、フルブラウジングデータのクリーンアップ 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/

@capgo/capacitor-inappbrowserから続けてください

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

In App Browser

In App Browserのチュートリアル