ガイド
Capacitor で In App Browser を使う方法
@capgo/capacitor-inappbrowser の使用
@capgo/capacitor-inappbrowser Capacitor アプリから外部のウェブコンテンツを開きます。Capacitor を open() プラットフォーム標準のブラウザとして使用するか、あるいは openWebView() カスタムサイズ、ツールバー、メッセージ、スクリプト、ダウンロード、プロキシ、ポップアップ制御、プライベートストレージ、またはページ上に重ねる Ionic UI を備えた、管理されたネイティブ WebView が必要な場合に使用します。
インストール
npm install @capgo/capacitor-inappbrowser
npx cap sync
このプラグインで利用可能な機能
- AndroidではChrome Custom Tabsを使用したシステムブラウザフロー、および
SFSafariViewControlleriOS上で。 - サイズ変更、非表示、表示、Capacitorアプリの背後への移動、最前面への復帰が可能な管理型WebViewを提供します。
- クリック、タッチ、スクロールの転送機能により、
dispatchInputEvent()アプリのUIがブラウザの上に重なっている場合でも操作可能です。 - AndroidとiOSの両方で、ネイティブWebViewフレームの外側をタップした際にCapacitorアプリへ操作が透過する、部分画面ブラウザを実現します。
- Cookie、キャッシュ、およびすべての閲覧データのクリーンアップ機能により、
persistWebViewData,clearCookies,clearAllCookies,clearCacheやclearAllBrowsingData. - アプリからページへの通信、
postMessage()およびページからアプリへの通信をサポートします。window.mobileApp.postMessage(...)、および script injection 機能も備えています。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、キャッシュ、local storage、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 での実装詳細についてはこちら： スタートガイド スタートガイドの実装詳細については、 Capgo プラグインディレクトリ Capgo プラグインディレクトリのプロダクトワークフローについては、 Capgo による Capacitor プラグイン Capgo による Capacitor Plugins の実装詳細、および プラグインの追加または更新 プラグインの追加または更新に関する実装詳細についてはこちら。