@capgo/capacitor-inappbrowser 사용

@capgo/capacitor-inappbrowser Capacitor 앱에서 외부 웹 콘텐츠를 열기 위해 사용합니다. 플랫폼 브라우저 표면을 위해 또는 앱이 관리되는 네이티브 웹뷰의 크기, 툴바, 메시지, 스크립트, 다운로드, 프록시, 팝업 제어, 개인 저장소 또는 아이언 UI 페이지 위에 층을 필요로 할 때 사용합니다. open() 설치 openWebView() 이 플러그인이 제공하는 것

Android에서 Chrome Custom Tabs를 사용하는 시스템 브라우저 흐름

npm install @capgo/capacitor-inappbrowser
npx cap sync

iOS에서 Safari를 사용하는 시스템 브라우저 흐름

__CAPGO_KEEP_0__ SFSafariViewController iOS에서 작동합니다.
Capacitor 앱에서 관리되는 WebView입니다. 크기, 숨기기, 표시, Capacitor 앱 뒤로 이동, 그리고 다시 앞으로 가져올 수 있습니다.
클릭, 터치, 스크롤 전달과 dispatchInputEvent() __CAPGO_KEEP_0__ 앱 UI가 브라우저 위에 있을 때
native WebView 프레임 외부의 탭이 Android와 iOS에서 Capacitor 앱으로 전달되는 부분 화면 브라우저입니다.
쿠키, 캐시, 전체 브라우징 데이터 정리와 persistWebViewData, clearCookies, clearAllCookies, clearCache, 그리고 clearAllBrowsingData.
__CAPGO_KEEP_0__ 앱에서 페이지로의 통신과 postMessage()__CAPGO_KEEP_0__ 앱에서 페이지로의 통신과 window.mobileApp.postMessage(...), 그리고 스크립트 주입과 executeScript().
다운로드 처리, 네이티브 우선 프록시 규칙, 팝업 제어, Google Pay 지원 _blank 링크 처리, 그리고 숨겨진 로드 가능한 브라우저 인스턴스.

일반적인 사용 사례

앱 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 });

체크아웃 오버레이, 브라우저 백업 결제 흐름, 가이드드 지원 흐름, 또는 이온 컨트롤이 라이브 웹 콘텐츠 위에 남아 있어야 하는 모든 기능에 사용하세요.

앱 클릭 가능 영역을 브라우저 시트 주변에 유지하기

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에서 클릭 가능합니다.

영구적인 웹 세션 피하기

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/login',
  persistWebViewData: false,
});

await InAppBrowser.clearAllBrowsingData();
await InAppBrowser.close({ id });

계정switching, 체크아웃 테스트, 지원 임ersonation, 또는 쿠키, 캐시, 로컬 스토리지, IndexedDB가 필요하지 않으면 auth 흐름에 사용하세요.

다중 웹 뷰를 미리 로드하고 교체하기

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 });

숨겨진 인스턴스는 상태를 유지하면서 네이티브 오버레이를 피하여 앱 터치가 차단되지 않습니다.

고급 웹 앱을 임베디드하기

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 페이지, 또는 앱 셸을 떠나지 않고 네이티브 앱 제어를 필요로하는 인터랙티브 웹 앱에 사용하세요.

전체 참조

GitHub: https://github.com/Cap-go/capacitor-inappbrowser/
문서: /docs/plugins/inappbrowser/

capgo를 사용하여 @capgo/capacitor-inappbrowser 계속 진행하세요

__CAPGO_KEEP_0__를 사용 중이시면 capgo를 사용하여 @capgo/capacitor-inappbrowser 계속 진행하세요 __CAPGO_KEEP_0__를 사용하여 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser와 연결하세요 native 플러그인 작업을 계획하고자 할 때 @capgo/capacitor-inappbrowser와 연결하세요 implementation detail은 @capgo/capacitor-inappbrowser에서 확인하세요 implementation detail은 Getting Started에서 확인하세요 __CAPGO_KEEP_0__ 플러그인 디렉토리 Capgo Plugin Directory Capgo 제품 워크플로우에서 Capgo 플러그인 디렉토리에서 Capacitor 플러그인 Capgo에 의해 Capgo 제품 워크플로우에서 Capacitor 플러그인 Capgo에 의해 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트에서

@__CAPGO_KEEP_0/CAPGO_KEEP_1__-inappbrowser

In App 브라우저 튜토리얼