In App Browser Capacitor 플러그인

@capgo/capacitor-inappbrowser 사용하기

@capgo/capacitor-inappbrowser Capacitor 앱에서 외부 웹 콘텐츠를 엽니다. 사용: open() 플랫폼 브라우저에는, 또는 openWebView() 앱에 커스텀 크기, 툴바, 메시지, 스크립트, 다운로드, 프록시, 팝업 제어, 프라이빗 스토리지 또는 페이지 위에 겹쳐 표시되는 Ionic UI를 갖춘 관리형 네이티브 WebView가 필요할 때 사용하세요.

설치

npm install @capgo/capacitor-inappbrowser
npx cap sync

플러그인이 제공하는 기능

• Android의 Chrome Custom Tabs를 활용한 시스템 브라우저 방식 및 SFSafariViewController iOS에서.
• 크기 조절, 숨기기, 표시, Capacitor 앱 뒤로 이동 또는 다시 앞으로 가져오기가 가능한 관리형 WebView.
• 앱 UI가 브라우저 위에 있는 경우에도 작동하는 dispatchInputEvent() 클릭, 터치, 스크롤 전달 기능.
• Android 및 iOS에서 네이티브 WebView 프레임 외부의 탭이 Capacitor 앱으로 전달되는 부분 화면 브라우저.
• 쿠키, 캐시 및 전체 브라우징 데이터 삭제 기능. 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 컨트롤이 라이브 웹 콘텐츠보다 위에 유지되어야 하는 모든 기능에 사용하세요.

Browser Sheet 주변의 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에서 나머지 앱 영역은 계속 탭할 수 있습니다.

지속적인 웹 세션 방지하기

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

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

계정 전환, 결제 테스트, 고객 지원 대행 또는 쿠키, 캐시, 로컬 스토리지, 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 });

숨겨진 인스턴스는 상태를 유지하면서도 앱 터치를 방해하는 네이티브 오버레이를 방지합니다.

고급 웹 앱 임베드하기

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/capacitor-inappbrowser 사용하기에서 계속 진행하기

사용 중이라면 @capgo/capacitor-inappbrowser 사용하기 네이티브 플러그인 작업을 계획하려면, 이를 다음 항목과 연결하세요: @capgo/capacitor-inappbrowser @capgo/capacitor-inappbrowser의 구현 세부 사항은 시작하기 Getting Started의 구현 상세 내용은 Capgo 플러그인 디렉토리 Capgo Plugin Directory의 제품 워크플로우에 맞춰, Capgo의 Capacitor 플러그인 Capgo의 Capacitor Plugins 구현 세부 사항 및 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트의 구현 세부 사항은.