본문으로 건너뛰기
Capgo - Capacitor을 빌드, 배포 및 업데이트 하세요. Capgo

@capgo/capacitor-in-app-browser

Capacitor의 내장형 앱 브라우저는 관리되는 WebView, 네이티브 UI layering, 개인적인 세션, 프록시, 다운로드, 팝업, 앱 메시지와 같은 기능을 제공합니다.
시작하기 GitHub

개요

Section titled “개요”

@capgo/capacitor-inappbrowser Capacitor 앱에 두 개의 브라우저 경로를 제공합니다: open() 시스템 브라우저 경험을 위한 openWebView() 관리되는 네이티브 WebView를 위한

Ionic UI에서 앱이 사이즈, 숨기기, 메시지, 스크립트, 프록시, 레이어링할 수 있습니다.

이름이 @__CAPGO_KEEP_0__/inappbrowser에서 @__CAPGO_KEEP_1__/__CAPGO_KEEP_2__-inappbrowser로 변경되었습니다.

패키지 이름이 변경되었습니다.

일반적인 사용 사례
  • Ionic 또는 Capacitor UI를 라이브 브라우저 페이지 위에 표시하세요. toBack, sendToBack(), bringToFront(), transparentBackground와 dispatchInputEvent().
  • 화면의 일부만을 차지하는 브라우저, 하단 시트, picture-in-picture 웹뷰를 만들 수 있습니다. width, height, x, y와 updateDimensions().
  • 사용자가 안드로이드 및 iOS에서 Capacitor 앱을 탭하여 커스텀 사이즈 브라우저 프레임 외부에서 앱을 사용할 수 있습니다.
  • 체크아웃, 로그인, 지원, 계정 Switching 흐름을 실행할 수 있습니다. 이 흐름은 영구적인 웹사이트 저장소 없이도 작동합니다. persistWebViewData: false 그리고 clearAllBrowsingData().
  • 다중 브라우저 인스턴스를 로드하고 페이지 상태를 보존하는 동안 hidden, hide()와 show() 다중 브라우저 인스턴스를 로드하고 페이지 상태를 보존하는 동안
  • 고급 웹 앱을 임베드할 수 있습니다. 이 앱은 요청 프록시, 파일 업로드, 다운로드, 팝업 제어, Google Pay 지원, 링크 처리 및 앱-페이지 메시징이 필요합니다. _blank 기본 기능

core capabilities

Core Capabilities
  • open Android 또는 iOS에서 Chrome Custom Tabs를 열거나 SFSafariViewController iOS에서 작동합니다.
  • openWebView 관리형 WebView의 크기, 위치, 네이티브 네비게이션, 메시징, 스크립팅, 프록시, 다운로드, 팝업, 데이터 제어를 커스터마이즈할 수 있습니다.
  • sendToBack / bringToFront 관리형 브라우저를 Capacitor 호스트 WebView 뒤로 또는 위로 옮길 수 있습니다.
  • dispatchInputEvent 네이티브 앱 UI 뒤의 브라우저로 클릭, 터치, 스크롤 이벤트를 전달할 수 있습니다.
  • updateDimensions 페이지를 다시 로드하지 않고 관리형 WebView의 크기와 위치를 변경할 수 있습니다.
  • hide / show 관리형 WebView를 로드하고 제거하거나 원래 위치로 복원할 수 있습니다.
  • postMessage / executeScript Capacitor 앱과 JavaScript를 실행하는 관리형 페이지와 연결할 수 있습니다.
  • clearAllBrowsingData / persistWebViewData 쿠키, 캐시, 스토리지, IndexedDB, 세션 지속성을 제어할 수 있습니다.
  • handleDownloads프록시 규칙 및 팝업 이벤트 - 문서 포털, 업로드 흐름, 결제 페이지, 임베디드 웹 앱을 지원합니다.

공개 API

Section titled “공개 API”
메서드설명
goBack웹뷰의 히스토리에서 뒤로가기 가능하다.
open새 창에서 URL 열기, 안드로이드에서는 Chrome Custom Tabs, iOS에서는 SFSafariViewController를 사용한다.
clearCookiesURL의 쿠키 지우기 When id 생략 시 모든 열린 웹뷰에 적용된다.
clearAllCookies모든 쿠키 지우기 When id 생략 시 모든 열린 웹뷰에 적용된다.
clearCache캐시 지우기 When id 생략 시 모든 열린 웹뷰에 적용된다.
clearAllBrowsingData기본 저장소와 관리되는 웹뷰에서 쿠키, 캐시, 로컬 스토리지, 세션 스토리지, IndexedDB, 기타 브라우징 데이터를 지운다.
getCookiesURL에 대한 쿠키를 가져옵니다.
close웹뷰를 닫습니다. 생략 시 현재 웹뷰를 닫습니다. id 웹뷰가 활성화된 경우 웹뷰를 닫습니다.
hide이전에 숨겨진 웹뷰를 표시합니다. 생략 시 현재 웹뷰를 대상으로합니다. id 웹뷰가 활성화된 경우 대상이 됩니다.
show호스트 WebView 뒤의 브라우저를 다시 앞으로 밀어냅니다. id 웹뷰가 활성화된 경우 대상이 됩니다.
sendToBacknative 브라우저를 Capacitor host WebView 뒤로 옮겨 앱 UI가 위에 나타나도록 함.
bringToFront도구栏과 향상된 기능(카메라 접근, 파일 접근, 이벤트 듣기, 자바스크립트 주입, 양방향 통신 등)을 지원하는 새로운 웹뷰에서 URL을 열어줍니다.
dispatchInputEvent__CAPGO_KEEP_0__을 InAppBrowser 창에 주입합니다. 생략 시 InAppBrowser 창에 주입합니다.
openWebView__CAPGO_KEEP_0__
executeScriptcode id omitted, 모든 열려 있는 웹 뷰에서 실행됩니다.
postMessage웹 뷰 (인앱 브라우저)로 이벤트를 전송합니다. 페이지에서 window.addEventListener('messageFromNative', listenerFunc). The detail 는 JSON-serializable이어야 합니다. id omitted, 열려 있는 모든 웹 뷰로 방송합니다.
takeScreenshot현재 웹 뷰 뷰포트를 PNG 스크린샷으로 캡처합니다. id omitted, 활성 웹 뷰를 대상으로합니다.
setUrl웹 뷰의 URL을 설정합니다. id omitted, 활성 웹 뷰를 대상으로합니다.
addListenerURL 변경을 듣기 위해, 열려 있는 웹 뷰만.
addListenerURL 변경을 듣기 위해; buttonNearDoneClick웹 뷰에 대한 id.
addListener웹뷰가 열려 있을 때만 닫기 클릭을 듣습니다.
addListener사용자가 확인 버튼을 클릭할 때 발생하며, openWebView의 shareDisclaimer와 closeModal과 함께 작동합니다.
addListener웹뷰가 이벤트를 앱으로 보낼 때 발생합니다. 사용자 정의 이벤트를 발생시키려면 window.mobileApp.postMessage(...) 페이지 내에서 사용하고, 전송된 데이터가 JSON-serializable해야 합니다.
addListenerAPI에서 캡처된 스크린샷, 네이티브 스크린샷 버튼, 또는 주입된 자바스크립트 브리지를 통해 캡처된 스크린샷이 발생할 때마다 발생합니다.
addListener페이지가 로드될 때 발생합니다.
addListener페이지 로드 오류 시 발생합니다.
addListener네이티브 다운로드 처리가 로컬 파일을 저장한 후 발생합니다. 이 옵션을 사용하려면 handleDownloads: true 웹뷰를 열 때 사용합니다.
addListener네이티브 다운로드 처리가 실패할 때 발생합니다. 이 옵션을 사용하려면 handleDownloads: true 웹뷰를 열 때 사용합니다.
addListener페이지가 팝업/새 창을 열 때 발생합니다. 반환된 팝업 ID를 사용하여 executeScript, postMessage, show, hide, 그리고 close.
addListener자바스크립트 콘솔 출력을 감시하기 위해 사용하는 메서드입니다. addProxyHandler() 이 메서드를 직접 호출하는 대신 사용하세요.
addListener자바스크립트 콘솔 출력을 감시하기 위해 사용하는 메서드입니다. captureConsoleLogs: true 웹뷰를 열 때 사용하세요.
handleProxyRequest자바스크립트 콘솔 출력을 감시하기 위해 사용하는 메서드입니다. addProxyHandler() 자바스크립트 콘솔 출력을 감시하기 위해 사용하는 메서드입니다. phase 이 메서드를 사용하여 자바스크립트 콘솔 출력을 감시하기 위해 사용하는 메서드를 제거합니다. proxyRequest listener.
removeAllListeners웹뷰의 크기와 위치를 변경할 수 있습니다. 런타임에 웹뷰의 크기와 위치를 변경할 수 있습니다.
reload__CAPGO_KEEP_0__
updateDimensions__CAPGO_KEEP_1__ id omitted, 활성 웹뷰를 대상으로합니다.
setEnabledSafeTopMargin웹뷰의 활성화된 위쪽 안전 여유 공간을 런타임에 설정합니다. 웹에서 이 메서드는 레이아웃 변경 없이 반환됩니다. id omitted, 활성 웹뷰를 대상으로합니다. 웹에서 이 메서드는 레이아웃 변경 없이 반환됩니다.
setEnabledSafeBottomMargin웹뷰의 활성화된 아래쪽 안전 여유 공간을 런타임에 설정합니다. 웹에서 이 메서드는 레이아웃 변경 없이 반환됩니다. id omitted, 활성 웹뷰를 대상으로합니다. 웹에서 이 메서드는 레이아웃 변경 없이 반환됩니다.
openSecureWindowOAuth2 인증 창을 안전하게 열고, 웹에서 리다이렉트된 URL을 반환합니다. BroadcastChannel참조 값

참조 값

Reference Values

툴바 종류

툴바 종류

Toolbar Types
가치사용자는
activity닫기 및 공유 제어를 갖춘 간단한 도구栏을 찾을 것입니다.
compact닫기 제어를 갖춘 간단한 도구栏.
navigation뒤로 및 앞으로 제어를 갖춘 풀 네비게이션 도구栏.
blank도구栏이 없습니다.

진실의 근원

“진실의 근원”이라는 제목을 가진 섹션

이 참조는 src/definitions.ts in capacitor-inappbrowser.

capgo에서 계속하기: @capgo/capacitor-inappbrowser

Section titled “@capgo/capacitor-inappbrowser에서 계속하기”

만약 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser을 사용 중이라면 @capgo/capacitor-inappbrowser을 사용 중이라면 native plugin 작업을 계획하기 위해 연결하세요 @capgo/capacitor-in-app-browser native 기능을 @capgo/capacitor-inappbrowser과 연결하세요 Capgo 플러그인 디렉토리 제품 워크플로우를 @Capgo 플러그인 디렉토리에서 관리하세요 Capacitor Capgo의 플러그인으로 Capgo Capacitor 플러그인 구현 세부 사항은 Capgo에 의해 제공됩니다. 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트 Ionic Enterprise Plugin 대체 옵션 Ionic Enterprise Plugin 대체 옵션의 제품 워크플로에 대해