인 앱 브라우저 Capacitor 플러그인

@capgo/capacitor 내 애플리케이션 브라우저

@capgo/capacitor-inappbrowser 외부 웹 콘텐츠를 Capacitor 앱에서 열 수 있습니다. 사용 open() for the platform browser surface, or openWebView() when your app needs a managed native WebView with custom size, toolbar, messages, scripts, downloads, proxying, popup control, private storage, or Ionic UI layered above the page.

설치

npm install @capgo/capacitor-inappbrowser
npx cap sync

이 플러그인은 다음을 제공합니다.

• Android와 iOS에서 Chrome Custom Tabs를 사용하는 시스템 브라우저 흐름 SFSafariViewController Android와 iOS에서.
• Capacitor 앱 위에 숨기거나 표시, 뒤로 보내기, 다시 앞으로 보내기, 크기 조정할 수 있는 관리되는 웹 뷰
• 앱 UI가 브라우저 위에 있을 때 클릭, 터치, 스크롤 전달 dispatchInputEvent() 앱 UI는 브라우저 위에 위치합니다.
• Android 및 iOS에서 native WebView 프레임 외부의 탭은 Capacitor 앱으로 전달됩니다.
• , persistWebViewData, clearCookies, clearAllCookies, clearCache앱에서 페이지로의 통신 clearAllBrowsingData.
• , postMessage()페이지에서 앱으로의 통신 window.mobileApp.postMessage(...)Live Update executeScript().
• Cloudflare _blank Capacitor

GitHub

Capgo

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

code

API

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/offers',
  height: window.innerHeight - 200,
  y: 0,
});

await InAppBrowser.updateDimensions({ id, height: window.innerHeight });

SDK

CLI

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

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

npm

bun

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

다운로드 처리, 네이티브 우선 프록시 규칙, 팝업 제어, Google Pay 지원,

웹 앱을 내장하세요

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_KEEP_1__-inappbrowser를 사용하고 있다면 capgo/capacitor-inappbrowser를 연결하세요 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-inappbrowser의 구현 세부 사항을 참조하세요 @capgo/capacitor-inappbrowser @capgo/capacitor-inappbrowser 시작하기 시작하기 구현 세부 사항에 대해 Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로에 대해 Capacitor Capgo 플러그인 Capacitor Capgo 플러그인 구현 세부 사항 및 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트 구현 세부 사항에 대해