시작하기
설치 단계와 이 플러그인의 전체 마크다운 가이드를 포함하는 설정 지시를 복사하세요.
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-webview-version-checker`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/webview-version-checker/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
설치
설치 섹션 제목Capgo의 AI 보조 설치를 사용하여 플러그인을 설치할 수 있습니다. AI 도구에 Capgo 기능을 추가하려면 다음 명령어를 사용하세요.
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins다음 명령어를 사용하여 다음 프롬프트를 입력하세요.
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-webview-version-checker` plugin in my project.만약 Manual Setup을 선호한다면, 플러그인을 설치하기 위해 다음 명령어를 실행하고 아래에 플랫폼에 따라 설명된 지침을 따르세요.
-
패키지 설치
터미널 창 bun add @capgo/capacitor-webview-version-checker -
자연스러운 프로젝트를 동기화하세요
터미널 창 bunx cap sync -
선택적: 플러그인 구성 추가 기본값으로 실행하거나( ) 또는 커스터마이즈한 프롬프트 및.threshold 동작을 사용할 수 있습니다.
WebviewVersionChecker: {}기본 동작 (주요 사용 사례)capacitor.config.ts.
제목: 기본 동작 (주요 사용 사례)
이 플러그인은 기본적으로 브라우저리스트 스타일의 호환성 규칙을 사용합니다.기본값으로
minimumDeviceSharePercent공유 데이터 세트는 빌드 시 caniuse 데이터에서 패키징됩니다.3- 기본 흐름에서 런타임 데이터 세트 URL 호출이 필요하지 않습니다.
- 클립보드에 복사
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = { plugins: { WebviewVersionChecker: {}, },};
export default config;간단한 설정만 구성 (자연스러운 프롬프트 표시)
간단한 설정만 구성 (자연스러운 프롬프트 표시)import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = { plugins: { WebviewVersionChecker: { autoPromptOnOutdated: true, }, },};
export default config;고급 임계치 모드 (사용자 정의 데이터 집합)
고급 임계치 모드 (사용자 정의 데이터 집합)import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = { plugins: { WebviewVersionChecker: { minimumDeviceSharePercent: 3, versionShareByMajor: { '137': 58.2, '136': 21.3, '135': 4.6, '134': 2.1, }, autoPromptOnOutdated: true, }, },};
export default config;만약에 실제 세계에서 공유하는 것에 기반한 호환성을 원한다면, 고정된 버전만으로는 충분하지 않다.
minimumDeviceSharePercent: 3설치된 주요 버전은 데이터 집합 내에서 최소 3% 이상을 대표해야 한다.versionShareByMajor당신의 사용자 정의 맵: 주요 버전 => 퍼센트- 만약에 원격 데이터를 선호한다면, 사용하라.
versionShareApiUrl다음 중 하나를 사용하라:{ "versionShareByMajor": { "137": 54.2, "136": 23.8 } }{ "shareByMajor": { "137": 54.2, "136": 23.8 } }{ "versions": [{ "major": 137, "share": 54.2 }, { "version": "136.0.0.0", "percent": 23.8 }] }
자바스크립트를 사용한 고급 사용법
고급 사용자용 자바스크립트import { WebviewVersionChecker } from '@capgo/capacitor-webview-version-checker';
await WebviewVersionChecker.addListener('webViewOutdated', (status) => { console.log('Outdated WebView detected', status);});
await WebviewVersionChecker.check({ minimumMajorVersion: 124, showPromptOnOutdated: true,});Capacitor 설정만 사용하는 대신 이 플러그인을 사용하는 이유
Section titled “Why use this plugin instead of only Capacitor config”Capacitor는 정적 최소 체크를 지원합니다.
android: { minWebViewVersion: 124,},server: { errorPath: 'unsupported-webview.html',}이 플러그인은 런타임 이벤트와 네이티브 프롬프트 UX를 추가하여 사용자가 업데이트를 권장받으면서도 앱을 여전히 열고 사용할 수 있도록 합니다.
평가 순서:
- 제공된 (+데이터셋) 디바이스-쉐어 임계값 모드
minimumDeviceSharePercent최신 버전 모드 ( - 최소 메이저 폴백 (
latestVersion/latestVersionApiUrl) - 최소 메이저 폴백 (
minimumMajorVersion)
Android 제공자 처리
Android 제공자 처리Capacitor의 Android에서 사용하는 WebView 제공자 모델을 모두 지원합니다.
- Android 5-6 및 10+: Android System WebView (
com.google.android.webview) - Android 7-9: Google Chrome (
com.android.chrome)
Getting Started에서 계속하기
Getting Started에서 계속하기Getting Started을 사용하여 Getting Started을 사용하여 native 미디어 및 인터페이스 동작을 계획하고 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-webview-version-checker를 사용하여 native capability을 capgo/capacitor-webview-version-checker를 사용하여 for the native capability in Using @capgo/capacitor-webview-version-checker, Using @capgo/capacitor-live-activities native 기능을 위해 @capgo/capacitor-live-activities를 사용합니다. @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 구현 세부 정보를 위해 Using @capgo/capacitor-video-player native 기능을 위해 @capgo/capacitor-video-player를 사용합니다. 그리고 @capgo/capacitor-video-player @capgo/capacitor-video-player의 구현 세부 정보를 위해