시작하기
이 플러그인의 설치 단계와 전체 마크다운 가이드를 포함한 설정 프롬프트를 복사하세요.
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.
설치
설치 제목AI-Assisted Setup을 사용하여 플러그인을 설치할 수 있습니다. 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 -
선택 사항: 플러그인 구성 추가 기본값으로 실행하거나(
WebviewVersionChecker: {}) 또는 사용자 지정 프롬프트 및 임계값 동작을 커스터마이즈할 수 있습니다.capacitor.config.ts.
기본 동작 (주요 사용 사례)
제목이 “기본 동작 (주요 사용 사례)”인 섹션이 플러그인은 기본적으로 브라우저리스트 스타일의 호환성 규칙을 사용합니다:
minimumDeviceSharePercent기본값으로3- 공유 데이터 세트는 빌드 시 caniuse 데이터에서 패키징됩니다.
- 기본 흐름에서 런타임 데이터 세트 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이는 당신의 사용자 정의 맵입니다: 주요 버전 => 퍼센트.- 원격 데이터를 사용하는 경우
versionShareApiUrlwith one of:{ "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 }] }
JavaScript를 사용한 고급 사용
JavaScript를 사용한 고급 사용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 설정만 사용하는 것보다
이 플러그인을 사용하는 이유는 Capacitor 설정만 사용하는 것보다Capacitor는 정적 최소 체크를 지원합니다:
android: { minWebViewVersion: 124,},server: { errorPath: 'unsupported-webview.html',}이 플러그인은 런타임 이벤트와 네이티브 프롬프트 UX를 추가하여 사용자가 업데이트를 권장받으면서도 앱을 여전히 열고 사용할 수 있도록 합니다.
평가 순서:
- 장치 공유 임계값 모드 (
minimumDeviceSharePercent+ 데이터 세트), 제공되면 - 최신 버전 모드 (
latestVersion/latestVersionApiUrl) - 최소 주요 버전 fallback (
minimumMajorVersion)
안드로이드 제공자 처리
제목 "안드로이드 제공자 처리"Capacitor 안드로이드에서 사용하는 WebView 제공자 모델 모두를 지원합니다:
- 안드로이드 5-6 및 10+: 안드로이드 시스템 WebView (
com.google.android.webview) - 안드로이드 7-9: Google Chrome (
com.android.chrome)
Getting Started에서 계속하기
제목 "Getting Started에서 계속하기"이러한 플러그인은 Getting Started 자연 미디어 및 인터페이스 동작을 계획하는 데 사용하는 경우 Capgo capgo-capacitor-webview-version-checker Capgo capgo-capacitor-webview-version-checker Capgo capgo-capacitor-live-activities Capgo capgo-capacitor-live-activities Capgo capgo-capacitor-live-activities Capgo capgo-capacitor-live-activities Capgo capgo-capacitor-video-player Capgo capgo-capacitor-video-player Capgo capgo-capacitor-video-player Capgo capgo-capacitor-video-player