ガイド
Capacitor で In App Browser を使う方法
@capgo/capacitor-inappbrowser を使用して
@capgo/capacitor-inappbrowser Capacitor アプリから外部のWebコンテンツを開きます。 open() をプラットフォームのブラウザとして使用するか、 openWebView() カスタムサイズ、ツールバー、メッセージ、スクリプト、ダウンロード、プロキシ、ポップアップ制御、プライベートストレージ、またはページ上に重ねる Ionic UI を備えた、管理されたネイティブ WebView が必要な場合に使用します。
インストール
npm install @capgo/capacitor-inappbrowser
npx cap sync
このプラグインで利用可能な機能
- AndroidではChrome Custom Tabsを使用したシステムブラウザフロー、および
SFSafariViewController同様に開きます。 - サイズ変更、非表示、表示、Capacitorアプリの背後への移動、最前面への復帰が可能な管理型WebViewを提供します。
- クリック、タッチ、スクロールの転送機能により、
dispatchInputEvent()アプリのUIがブラウザの上に重なっている場合でも操作可能です。 - AndroidとiOSの両方で、ネイティブWebViewフレームの外側をタップするとCapacitorアプリに操作が透過する、部分画面ブラウザを実現します。
- Cookie、キャッシュ、およびブラウジングデータの完全なクリーンアップ機能により、
persistWebViewData,clearCookies,clearAllCookies,clearCache、およびclearAllBrowsingData. - アプリからページへの通信、
postMessage()およびページからアプリへの通信をサポートします。window.mobileApp.postMessage(...)、およびスクリプトインジェクション機能付きexecuteScript(). - ダウンロード処理、ネイティブ優先のプロキシルール、ポップアップ制御、Google Pay対応、
_blankリンク処理、および非表示のプリロード可能なブラウザインスタンス。
よくあるユースケース
Live Browserの上にApp 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コンテンツの上に維持する必要がある機能に使用します。
ブラウザシート周辺のAppのクリック操作を維持する
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、キャッシュ、LocalStorage、IndexedDBが必要以上に残らないようにすべき認証フローに使用します。
複数のWebViewをプリロードして切り替える
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/capacitor-inappbrowser の使用方法 ネイティブプラグインの作業を計画するには、それを以下と連携させる @capgo/capacitor-inappbrowser @capgo/capacitor-inappbrowser の実装詳細については、 はじめに Getting Started の実装の詳細については、 Capgo プラグインディレクトリ Capgo プラグインディレクトリでのプロダクトワークフロー向けに、 Capgo による Capacitor プラグイン Capgo による Capacitor Plugins の実装の詳細、および プラグインの追加・更新 Adding or Updating Plugins の実装の詳細については、