@capgo/capacitor-inappbrowser 사용

@capgo/capacitor-inappbrowser Capacitor 앱에서 외부 웹 콘텐츠를 열기 위해 사용합니다. 사용자 인터페이스 surface에 대한 플랫폼 브라우저 또는 앱이 관리되는 네이티브 WebView가 필요할 때 사용합니다. open() __CAPGO_KEEP_0__ openWebView() __CAPGO_KEEP_0__

시스템 브라우저 흐름에 Chrome Custom Tabs를 Android와 함께 사용합니다.

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가 브라우저 위에 있을 때 발생하는 이벤트입니다.
Partial-screen browsers where taps outside the native WebView frame pass through to the Capacitor app on Android and iOS.
쿠키, 캐시, 브라우징 데이터를 모두 삭제할 수 있습니다. persistWebViewData, clearCookies, clearAllCookies, clearCache, 그리고 clearAllBrowsingData.
앱에서 페이지로 데이터를 전달할 수 있습니다. postMessage(), 페이지에서 앱으로 데이터를 전달할 수 있습니다. window.mobileApp.postMessage(...), 그리고 스크립트를 주입할 수 있습니다. executeScript().
다운로드 처리, 네이티브 프록시 규칙, 팝업 제어, Google Pay 지원, 링크 처리, 그리고 숨겨진 로드 가능한 브라우저 인스턴스. _blank iOS에서 동작합니다.

일반적인 사용 사례

앱 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가 필요하지 않은 경우에 사용하세요.

미리 로드 및 여러 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: github.com/Cap-go/capacitor-inappbrowser/
문서: /docs/plugins/inappbrowser/

capgo에서 capacitor-inappbrowser를 계속 사용하세요.

__CAPGO_KEEP_0__를 사용 중이시면 capgo에서 capacitor-inappbrowser를 사용중이시면 __CAPGO_KEEP_0__에서 __CAPGO_KEEP_1__-inappbrowser를 연결하세요. capgo에서 capacitor-inappbrowser를 사용하여 @capgo/capacitor-inappbrowser의 구현 세부 정보를 확인하세요. for the implementation detail in @capgo/capacitor-inappbrowser, Getting Started의 구현 세부 정보를 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser에서 확인하세요. __CAPGO_KEEP_0__ 플러그인 디렉토리 Capgo Capgo 제품 워크플로우에서 Capgo 플러그인 디렉토리에서 Capacitor 플러그인 Capgo에 의해 Capgo 제품 워크플로우에서 Capacitor 플러그인 Capgo에 의해 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트에서

인앱 브라우저

In 앱 브라우저에 대한 튜토리얼