イン アプリ ブラウザ

@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。
• クリック、タッチ、スクロールのフォワード機能があります。 dispatchInputEvent() アプリのUIがブラウザの上にある場合のクリック、タッチ、スクロールのフォワード機能があります。
• AndroidとiOSで、タップ外側のネイティブWebviewフレームを通過してCapacitorアプリにパスする部分スクリーンブラウザ。
• Cookie、キャッシュ、フルブラウジングデータのクリーンアップ機能があります。 persistWebViewData, clearCookies, clearAllCookies, clearCache, clearAllBrowsingData.
• アプリからページへの通信機能があります。 postMessage(), window.mobileApp.postMessage(...)ページからアプリへの通信機能があります。 executeScript().
• , _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/

Capacitor @capgo/capacitor-inappbrowser を継続して使用

Capacitor @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser を使用している場合 Capacitor @capgo/capacitor-inappbrowser を使用して、ネイティブ プラグインの作業計画を実施 Capacitor @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser を使用して、ネイティブ プラグインの実装詳細 Capacitor @capgo/capacitor-inappbrowser の実装詳細 Capacitor @capgo/capacitor-inappbrowser のドキュメント Capacitor @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser のドキュメント Capacitor @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser のドキュメント Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Capgoのプラグイン Capacitor プラグインの実装詳細については、Capgo によって提供されるプラグインです。 プラグインの追加または更新 プラグインの追加または更新の実装詳細のために。