@capgo/capacitor-inappbrowser를 사용하여

@capgo/capacitor-inappbrowser 외부 웹 콘텐츠를 Capacitor 앱에서 열 수 있습니다. 사용 open() 플랫폼 브라우저 표면을 위해, 또는 openWebView() 앱이 관리되는 네이티브 웹뷰를 사용할 때, 커스텀 사이즈, 툴바, 메시지, 스크립트, 다운로드, 프록시, 팝업 제어, 개인 저장소, 또는 Ionic UI가 페이지 위에 층을 형성할 때

설치

npm install @capgo/capacitor-inappbrowser
npx cap sync

이 플러그인이 노출하는 것

Android에서 Chrome Custom Tabs를 사용하는 시스템 브라우저 흐름 SFSafariViewController iOS에서 작동합니다.
Capacitor 앱에서 관리되는 WebView는 크기, 숨기기, 표시, Capacitor 앱 뒤로 이동, 그리고 다시 앞으로 가져올 수 있습니다.
클릭, 터치, 스크롤 전달과 dispatchInputEvent() 브라우저 위에 앱 UI가 있는 경우
Android와 iOS에서 native WebView 프레임 외부의 탭이 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 });

커스텀 사이즈된 브라우저는 자신의 프레임 내에서만 터치 이벤트를 캡처합니다. 앱의 남은 표시되는 영역은 안드로이드와 iOS에서 클릭이 가능합니다.

영구적인 웹 세션 피하기

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

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

계정switching, 체크아웃 테스트, 지원 임시화, 또는 쿠키, 캐시, 로컬 스토리지, IndexedDB가 필요 이상으로 살아남지 않도록하는 인증 흐름에 사용하세요.

여러 웹 뷰를 미리 로드하고 교체하세요

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

숨겨진 인스턴스는 상태를 유지하면서 native overlay가 앱 터치를 막지 않도록합니다.

고급 웹 앱을 임베드하세요

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 페이지, 또는 앱 셸을 떠나지 않고 native 앱 제어를 필요로하는 상호 작용 웹 앱에 이 패턴을 사용하세요.

전체 참조

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

capgo를 계속 사용하세요. @capgo/capacitor-inappbrowser

__CAPGO_KEEP_0__를 사용하고 있다면 @capgo/capacitor-inappbrowser native 플러그인 작업을 계획하고 있다면 capgo/capacitor-inappbrowser for the implementation detail in @capgo/capacitor-inappbrowser, @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser 의 구현 세부 사항을 참조하세요. @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser Getting Started를 참조하세요. 구현 세부 사항을 참조하세요. Getting Started를 참조하세요. ','Capgo 플러그인 디렉토리 제품 워크플로우를 위한 Capgo 플러그인 디렉토리에서 Capacitor 플러그인은 Capgo에서 제품 구현 세부 사항을 위한 Capacitor 플러그인 Capgo에서, 그리고 플러그인을 추가하거나 업데이트 플러그인을 추가하거나 업데이트 구현 세부 사항을 위한.

인앱 브라우저