@capgo/capacitor-inappbrowser Capacitor アプリに2つのブラウザパスを提供します: open() システムブラウザを利用する場合、または openWebView() アプリ内でサイズ調整、非表示、メッセージ送信、スクリプト実行、プロキシ、Ionic UIとのレイヤー化が可能な、管理されたネイティブWebViewを利用する場合に適しています。
OAuthや決済フロー、埋め込みサポートポータル、支払い画面、ビデオ通話、ドキュメントポータル、インタラクティブなWebアプリなど、単なる外部ブラウザ以上の機能や、ライブWebコンテンツに対してアプリ側からネイティブコントロールを行う必要がある場合に使用してください。
パッケージ名を変更しました。よくあるユースケース
「よくあるユースケース」セクション- ライブブラウザページの上に、Ionicや Capacitor のUIを重ねて表示できます。
toBack,sendToBack(),bringToFront(),transparentBackgroundやdispatchInputEvent(). - 部分的な画面サイズのブラウザ、ボトムシート、ピクチャーインピクチャー形式のWebViewを構築できます。
width,height,x,yやupdateDimensions(). - AndroidおよびiOSにおいて、カスタムサイズのブラウザフレームの外側にある Capacitor アプリをタップできるようにします。
- Run checkout, login, support, or account-switching flows without persistent website storage using
persistWebViewData: falseとclearAllBrowsingData(). - Keep multiple browser instances loaded with
hidden,hide()やshow()ページの状態を保持しながら実行可能です。 - リクエストプロキシ、ファイルアップロード、ダウンロード、ポップアップ制御、Google Payサポート、
_blankリンクハンドリング、およびアプリとページ間のメッセージングが必要な高度なウェブアプリを埋め込みます。
コア機能
「コア機能」セクションopen- AndroidではChrome Custom TabsでURLを開きます。SFSafariViewControlleriOS上で。openWebView- カスタムツールバー、サイズ調整、ネイティブナビゲーション、メッセージング、スクリプティング、プロキシ、ダウンロード、ポップアップ、データ制御を備えた管理されたネイティブWebViewを開きます。sendToBack/bringToFront- 管理されたブラウザを Capacitor ホスト WebView の背面または前面に移動します。dispatchInputEvent- ネイティブアプリの UI の背面にあるブラウザへ、クリック、タッチ、スクロールイベントを転送します。updateDimensions- ページをリロードせずに、管理された WebView のサイズと位置を変更します。hide/show- 管理された WebView のロード状態を維持したまま、ネイティブ表示の削除や復元を行います。postMessage/executeScript- Capacitor アプリと、管理されたページ内で実行される JavaScript を接続します。clearAllBrowsingData/persistWebViewData- Cookie、キャッシュ、ストレージ、IndexedDB、およびセッションの永続性を制御します。handleDownloads, プロキシルール、およびポップアップイベント - ドキュメントポータル、upload フロー、決済ページ、埋め込み Web アプリをサポートします。
公開 API
「Public API」セクション| メソッド | 説明 |
|---|---|
goBack | 可能な場合は WebView の履歴を戻ります。 |
open | URLを新しいフルスクリーンウィンドウで開きます。AndroidではChrome Custom Tabs、iOSではSFSafariViewControllerを使用します。 |
clearCookies | URLのクッキーをクリアするタイミング id 省略された場合、すべての開いているWebViewに適用されます。 |
clearAllCookies | すべてのクッキーを削除するタイミング id 省略された場合、すべての開いているWebViewに適用されます。 |
clearCache | キャッシュをクリアするタイミング id 省略された場合、すべての開いているWebViewに適用されます。 |
clearAllBrowsingData | デフォルトのストアおよび管理対象のWebViewから、クッキー、キャッシュ、local storage、session storage、IndexedDB、その他のブラウジングデータを削除します。 |
getCookies | 特定のURLのCookieを取得します。 |
close | WebViewを閉じます。 id 省略された場合は、アクティブなWebViewを閉じます。 |
hide | webviewを閉じずに非表示にします。再表示するにはshow()を使用してください。 id を省略すると、アクティブなWebViewが対象になります。 |
show | 非表示だったWebViewを表示します。 id を省略すると、アクティブなWebViewが対象になります。 |
sendToBack | ネイティブブラウザを Capacitor ホストWebViewの背面に移動し、アプリのUIを前面に表示できるようにします。 |
bringToFront | ホストWebViewの背面にあったブラウザを前面に戻します。 |
dispatchInputEvent | クリック、タッチ、スクロール入力を管理下のブラウザに送信します。座標はブラウザのビューポートからの相対値です。 |
openWebView | ツールバーを備えた新しいWebViewでURLを開きます。カメラやファイルへのアクセス、イベントのリスニング、JavaScriptの注入、双方向通信などの高度な機能を利用できます。 |
executeScript | InAppBrowserウィンドウにJavaScript code を注入します。 id を省略すると、開いているすべてのWebViewで実行されます。 |
postMessage | WebView(アプリ内ブラウザ)にイベントを送信します。ページ内では次を使ってリッスンします: window.addEventListener('messageFromNative', listenerFunc)。 detail ペイロードはJSONシリアライズ可能である必要があります。 id 省略すると、開いているすべてのwebviewにブロードキャストされます。 |
takeScreenshot | 現在のwebviewのビューポートをPNGスクリーンショットとしてキャプチャします。次の場合: id を省略すると、アクティブなWebViewが対象になります。 |
setUrl | webviewのURLを設定します。次の場合: id を省略すると、アクティブなWebViewが対象になります。 |
addListener | URLの変更を監視します(openWebViewのみ)。 |
addListener | を監視します: buttonNearDoneClickペイロードにはwebviewの id. |
addListener | 閉じるボタンのクリックを監視します(openWebViewのみ)。 |
addListener | 免責事項が必要な際にユーザーが確認ボタンをクリックするとトリガーされます。openWebViewのshareDisclaimerおよびcloseModalと連携します。 |
addListener | webviewからアプリへイベントが送信されたときに実行されます。 window.mobileApp.postMessage(...) ページ内で使用し、ペイロードはJSONシリアライズ可能な形式にしてください。 |
addListener | API プラグイン、ネイティブのスクリーンショットボタン、または注入された JavaScript ブリッジからスクリーンショットがキャプチャされるたびにトリガーされます。 |
addListener | ページがロードされたときにトリガーされます。 |
addListener | ページのロードエラー時にトリガーされます。 |
addListener | ネイティブのダウンロード処理によってファイルがローカルに保存された後にトリガーされます。これを有効にするには handleDownloads: true webview を開くとき。 |
addListener | ネイティブのダウンロード処理が失敗したときにトリガーされます。これを有効にするには handleDownloads: true webview を開くとき。 |
addListener | ページがポップアップや新しいウィンドウを開くたびにトリガーされます。返された popup id を executeScript, postMessage, show, hideや close. |
addListener | ネイティブランタイムによって委譲されたプロキシリクエストをリッスンします。推奨: addProxyHandler() 直接呼び出す代わりにこれを使用してください。 |
addListener | 管理対象のページから出力される JavaScript コンソール出力をリッスンします。これを有効にするには captureConsoleLogs: true webview を開くとき。 |
handleProxyRequest | 〜で使用される内部メソッド addProxyHandler() プロキシの決定をネイティブに返します。元の phase 手動での返答時に proxyRequest リスナーを通じて通知されます。 |
removeAllListeners | このプラグインのすべてのリスナーを削除します。 |
reload | 現在のウェブページをリロードします。 |
updateDimensions | webviewのサイズを更新します。実行時にwebviewのサイズや位置を変更できます。 id を省略すると、アクティブなWebViewが対象になります。 |
setEnabledSafeTopMargin | 実行時にwebviewのセーフエリア上部マージンの有効/無効を設定します。 id 省略された場合、アクティブなwebviewが対象となります。Webでは、このメソッドは何もしない(no-op)動作となり、レイアウトを変更せずに解決されます。 |
setEnabledSafeBottomMargin | 実行時にwebviewのセーフエリア下部マージンの有効/無効を設定します。 id 省略すると、アクティブなwebviewが対象になります。Webの場合、このメソッドは何もしない(no-op)動作となり、レイアウトを変更せずに解決されます。 |
openSecureWindow | セキュアなOAuth2ウィンドウを開きます。Webでは、リダイレクトされたURLを BroadcastChannel経由して返します。モバイルでは、アプリの設定にカスタムリダイレクトURIを登録してください。HTML、Info.plist、AndroidManifestの完全な例については、Getting Startedガイドを参照してください。 |
リファレンス値
「リファレンス値」というタイトルのセクションインアプリブラウザまたはWebViewを開く際に、これらの値をツールバーのオプションとして使用します。
ツールバーのタイプ
「ツールバーのタイプ」というセクション| 値 | ユーザーは以下を確認できます: |
|---|---|
activity | 閉じるボタンと共有コントロールを備えたシンプルなツールバー。 |
compact | 閉じるコントロールを備えたシンプルなツールバー。 |
navigation | 戻る・進む操作ができるフルナビゲーションツールバー。 |
blank | ツールバーなし。 |
Source of Truth
「Source Of Truth」セクションこのリファレンスは以下から同期されています: src/definitions.ts における capacitor-inappbrowser.
@capgo/capacitor-inappbrowser から続ける
「@capgo/capacitor-inappbrowser から続ける」というセクション使用している場合 @capgo/capacitor-inappbrowser ネイティブプラグインの作業を計画するには、次と連携してください: @capgo/capacitor-inappbrowser の使用 @capgo/capacitor-inappbrowser でネイティブ機能を利用するには、 Capgo プラグインディレクトリ Capgo プラグインディレクトリのプロダクトワークフローについては、 Capgo による Capacitor プラグイン Capgo による Capacitor プラグインの実装詳細については、 プラグインの追加または更新 プラグインの追加または更新における実装詳細については、および Ionic Enterprise プラグインの代替案 Ionic Enterprise プラグインの代替案におけるプロダクトワークフローについては。