메인 콘텐츠로 건너뛰기

@capgo/capacitor-inappbrowser

Native in-app browser for Capacitor with managed WebViews, native UI layering, private sessions, proxying, downloads, popups, and app messaging.

@capgo/capacitor-inappbrowser gives Capacitor apps two browser paths: open() 관리되는 네이티브 WebView를 위한 경로 openWebView() 관리되는 네이티브 WebView를 사용하여 앱이 사이즈, 숨기기, 메시지, 스크립트, 프록시, layering을 Ionic UI와 함께 수행할 수 있습니다.

페이지가 단순한 외부 브라우저만으로 충분하지 않은 경우 사용하세요: OAuth 및 체크아웃 흐름, 임베디드 지원 포털, 결제 화면, 비디오 호출, 문서 포털, 인터랙티브 웹 앱, 또는 앱이 라이브 웹 콘텐츠 주변에서 원본 제어를 필요로 하는 모든 흐름.

패키지 이름이 바뀌었습니다.
  • 라이브 브라우저 페이지 위에 Ionic 또는 Capacitor UI를 표시하세요. toBack, sendToBack(), bringToFront(), transparentBackground, 그리고 dispatchInputEvent().
  • 부분 화면 브라우저, 하단 시트, 그리고 picture-in-picture 웹뷰를 빌드하세요. width, height, x, y, 그리고 updateDimensions().
  • Android 및 iOS에서 사용자가 커스텀 사이즈 브라우저 프레임 외부에 Capacitor 앱을 탭할 수 있도록 해주세요.
  • 체크아웃, 로그인, 지원, 또는 계정-switching 흐름을 사용하여 영구적인 웹사이트 저장소를 사용하지 않고 실행하세요. persistWebViewData: false and clearAllBrowsingData().
  • 다중 브라우저 인스턴스를 로드하여 hidden, hide()show() 페이지 상태를 보존하는 동안
  • 고급 웹 앱을 임베드하여 요청 프록싱, 파일 업로드, 다운로드, 팝업 제어, Google Pay 지원, 링크 처리 및 앱-페이지 메시징이 필요합니다. _blank 기본 기능
  • open - 사용자 지정 툴바, 크기, 네이티브 네비게이션, 메시징, 스크립팅, 프록시, 다운로드, 팝업 및 데이터 제어를 지원하는 관리형 네이티브 WebView를 열거나 SFSafariViewController - 관리형 브라우저를 __CAPGO_KEEP_0__ 호스트 WebView 뒤로 또는 위로 이동하거나
  • openWebView - 네이티브 앱 UI 뒤의 브라우저로 클릭, 터치 및 스크롤 이벤트를 전달하거나
  • sendToBack / bringToFront - Moves a managed browser behind or above the Capacitor host WebView.
  • dispatchInputEvent - Forwards click, touch, and scroll events to a browser that is behind native app UI.
  • updateDimensions - 페이지를 다시 로드하지 않고 WebView 크기 및 위치를 변경합니다.
  • hide / show - 관리되는 WebView를 로드하여 제거하거나 원래 표시를 복원하는 동안 유지합니다.
  • postMessage / executeScript - 관리되는 페이지 내에서 실행 중인 JavaScript와 Capacitor 앱을 연결합니다.
  • clearAllBrowsingData / persistWebViewData - 쿠키, 캐시, 저장소, IndexedDB 및 세션 지속성을 제어합니다.
  • handleDownloads- 프록시 규칙 및 팝업 이벤트 - 문서 포털, 업로드 흐름, 결제 페이지 및 임베디드 웹 앱을 지원합니다.
메서드설명
goBack이전 페이지로 이동합니다.
openURL을 새 창에서 풀 스크린으로 열거나, 안드로이드에서는 Chrome Custom Tabs를, iOS에서는 SFSafariViewController를 사용합니다.
clearCookiesURL의 쿠키를 삭제합니다. When id omitted, 모든 열려 있는 웹 뷰에 적용됩니다.
clearAllCookiesClear all cookies When id omitted, 모든 열려 있는 웹 뷰에 적용됩니다.
clearCacheClear cache When id omitted, 모든 열려 있는 웹 뷰에 적용됩니다.
clearAllBrowsingData기본 저장소와 관리되는 웹 뷰에서 쿠키, 캐시, 로컬 스토리지, 세션 스토리지, IndexedDB, 그리고 다른 브라우징 데이터를 삭제합니다.
getCookies특정 URL에 대한 쿠키를 가져옵니다.
close웹 뷰를 닫습니다. When id omitted, 활성 웹 뷰를 닫습니다.
hide웹 뷰를 숨깁니다. 닫지 않습니다. show()를 사용하여 다시 나타낼 수 있습니다. When id omitted, 활성 웹 뷰를 대상으로합니다.
show이전에 숨겨진 웹 뷰를 표시합니다. When id 활성 웹뷰를 제외하고는 생략되면, 활성 웹뷰를 대상으로합니다.
sendToBack호스트 WebView 뒤의 네이티브 브라우저를 Capacitor 위에 표시하여 앱 UI를 위에 표시할 수 있도록 이동합니다.
bringToFront호스트 WebView 뒤의 브라우저를 앞으로 다시 이동합니다.
dispatchInputEvent관리 브라우저로 클릭, 터치 또는 스크롤 입력을 전달합니다. 브라우저 뷰포트에 상대적인 좌표입니다.
openWebView도구 모음과 향상된 기능, chẳng hạn như 카메라 접근, 파일 접근, 이벤트 듣기, 자바스크립트 주입, 양방향 통신 등이 있는 새로운 웹뷰에서 URL을 열 수 있습니다.
executeScriptInAppBrowser 창에 자바스크립트 code를 주입합니다. When id 생략되면, 열린 모든 웹뷰에서 실행됩니다.
postMessage웹뷰 (인앱 브라우저)로 이벤트를 전송합니다. 페이지에서 window.addEventListener('messageFromNative', listenerFunc)을 사용하여 이벤트를 듣습니다. The detail payload는 JSON-serializable해야합니다. When id 생략되면, 열린 모든 웹뷰로 방송합니다.
takeScreenshot현재 웹뷰 뷰포트를 PNG 스크린샷으로 캡처합니다. When id 활성 웹뷰를 대상으로 함.
setUrl웹뷰의 URL을 설정합니다. 활성 웹뷰를 대상으로 할 경우 URL을 생략할 수 있습니다. id 활성 웹뷰를 대상으로 함.
addListeneropenWebView만 해당하는 url 변경을 듣습니다.
addListeneropenWebView만 해당하는 buttonNearDoneClick; 웹뷰에서 보낸 이벤트를 받을 때 사용합니다. id.
addListener활성 웹뷰에서 사용자가 확인 버튼을 클릭했을 때 발생합니다. openWebView의 shareDisclaimer와 closeModal과 함께 작동합니다.
addListener웹뷰가 앱으로 이벤트를 보냈을 때 발생합니다.
addListener페이지에서 사용할 수 있는 함수를 정의하고, payload를 JSON-serializable로 유지하세요. window.mobileApp.postMessage(...) 이 플러그인 __CAPGO_KEEP_0__, 네이티브 스크린샷 버튼, 또는 주입된 자바스크립트 브리지를 통해 캡처된 스크린샷이 발생할 때마다 발생합니다.
addListenerWill be triggered whenever a screenshot is captured from the plugin API, the native screenshot button, or the injected JavaScript bridge.
addListenerWill be triggered when page is loaded.
addListener페이지 로드 오류 시 트리거됩니다.
addListener로컬 파일로 저장된 네이티브 다운로드 처리가 완료된 후 트리거됩니다. 이 옵션을 활성화하려면 handleDownloads: true 웹뷰를 열 때.
addListener네이티브 다운로드 처리가 실패한 경우 트리거됩니다. 이 옵션을 활성화하려면 handleDownloads: true 웹뷰를 열 때.
addListener페이지가 팝업/새 창을 열 때 트리거됩니다. 반환된 팝업 아이디를 사용하여 executeScript, postMessage, show, hide, close.
addListener네이티브 런타임이 위임한 프록시 요청을 듣습니다. 대신 addProxyHandler() 직접 호출하는 것보다
addListener관리 페이지가 내뿜는 자바스크립트 콘솔 출력을 듣습니다. 이 옵션을 활성화하려면 captureConsoleLogs: true 웹뷰를 열 때.
handleProxyRequest내부 메서드로 사용됩니다. addProxyHandler() 원본을 전달하여 네이티브로 프록시 결정 전송. phase 수동 응답 시 사용. proxyRequest 리스너.
removeAllListeners이 플러그인을 위한 모든 리스너 제거.
reload현재 웹 페이지를 다시 로드.
updateDimensions웹뷰 크기 및 위치를 런타임에 변경할 수 있도록 웹뷰 크기 및 위치를 업데이트합니다. id omitted일 때, 현재 활성화된 웹뷰를 대상으로합니다.
setEnabledSafeTopMargin웹뷰의 런타임에 사용할 수 있는 안전한 상단 마진을 설정합니다. omitted일 때, 현재 활성화된 웹뷰를 대상으로합니다. 웹에서 이 메서드는 레이아웃 변경 없이 무효화됩니다. id 웹뷰의 런타임에 사용할 수 있는 안전한 하단 마진을 설정합니다. omitted일 때, 현재 활성화된 웹뷰를 대상으로합니다. 웹에서 이 메서드는 레이아웃 변경 없이 무효화됩니다.
setEnabledSafeBottomMargin보안 OAuth2 창을 열어줍니다. 웹에서 리디렉션된 URL을 반환합니다. id is omitted, targets the active webview. On Web, this method is a no-op and resolves without changing layout.
openSecureWindowOpens a secure OAuth2 window. On web, return the redirected URL through a BroadcastChannel모바일에서, 앱 구성에서 커스텀 리다이렉트 URI를 등록하세요. 자세한 HTML, Info.plist, AndroidManifest 예제는 getting-started 가이드를 참조하세요.

인앱 브라우저 또는 WebView를 열 때 툴바 옵션과 함께 사용하세요.

사용자에게 보여질 툴바
activity닫기 및 공유 버튼이 있는 간단한 툴바.
compact닫기 버튼이 있는 간단한 툴바.
navigation뒤로 및 앞으로 버튼이 있는 풀 네비게이션 툴바.
blank툴바가 없는 상태.

실제 데이터의 출처

실제 데이터의 출처 섹션

이 참조는 src/definitions.tscapacitor-inappbrowser.

capgo에서 계속하기 @capacitor-inappbrowser

capgo에서 계속하기 @capacitor-inappbrowser 섹션

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser을 사용하는 경우 capgo/capacitor-inappbrowser __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser을 사용하여 Using @capgo/capacitor-inappbrowser에서 Using @capgo/capacitor-inappbrowser에서 native 기능을 연결하는 경우 Capgo Plugin Directory Capgo 제품 워크플로우를 위한 Capgo 플러그인 디렉토리 Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트 구현 세부사항을 위한 플러그인 추가 또는 업데이트, 그리고 Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체 제품 워크플로우를 위한 Ionic Enterprise 플러그인 대체.