@capgo/capacitor-inappbrowser 사용

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

설치

npm install @capgo/capacitor-inappbrowser
npx cap sync

이 플러그인이 제공하는 것

안드로이드에서 크롬 커스텀 탭을 사용하는 시스템 브라우저 흐름 SFSafariViewController iOS에서 동작합니다.
Managed WebViews that can be sized, hidden, shown, moved behind the Capacitor app, and brought back to the front.
클릭, 터치, 스크롤 전달과 dispatchInputEvent() 앱 UI가 브라우저 위에 있을 때
부분 화면 브라우저에서 안드로이드와 iOS에서 native WebView 프레임 바깥쪽의 탭이 Capacitor 앱으로 전달됩니다.
쿠키, 캐시, 전체 브라우징 데이터 정리와 persistWebViewData, clearCookies, clearAllCookies, clearCache, 그리고 clearAllBrowsingData.
앱에서 페이지로의 통신과 postMessage(), 페이지에서 앱으로의 통신과 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 });

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

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

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, 체크아웃 테스트, 지원 인물화, 또는 쿠키, 캐시, 로컬 스토리지, 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 });

숨겨진 인스턴스는 상태를 유지하면서 네이티브 오버레이를 피합니다.

고급 웹 앱을 임베드

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/capacitor-inappbrowser를 사용하여 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser와 연결하여 capgo/capacitor-inappbrowser의 implementation detail을 참조하세요. for the implementation detail in @capgo/capacitor-inappbrowser, Getting Started의 implementation detail을 참조하세요. __CAPGO_KEEP_0__ 플러그인 디렉토리 Capgo: Capgo 제품 워크플로우에서 Capgo 플러그인 디렉토리에서 Capacitor 플러그인 Capgo에 의해 Capgo 제품 워크플로우에서 Capacitor 플러그인 Capgo에 의해 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트에서

인앱 브라우저

기어