Skip to content

시작하기

GitHub

Capgo의 AI-assisted 설치를 사용하여 플러그인을 설치할 수 있습니다. 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을 선호한다면, 플러그인을 설치하기 위해 다음 명령어를 실행하고 아래에 플랫폼에 따라 설명된 지침을 따르세요.

  1. 패키지 설치

    터미널 창
    bun add @capgo/capacitor-webview-version-checker
  2. 자연스러운 프로젝트를 동기화하세요

    터미널 창
    bunx cap sync
  3. __CAPGO_KEEP_0__: 플러그인 설정 추가 (선택) 기본값으로 실행하거나 (WebviewVersionChecker: {}) 또는 경고 및.threshold 동작을 커스터마이즈할 수 있습니다. capacitor.config.ts.

기본 동작 (주요 사용 사례)

기본 동작 (주요 사용 사례) 섹션

이 플러그인은 기본적으로 브라우저리스트 스타일의 호환성 규칙을 사용합니다.

  • minimumDeviceSharePercent __CAPGO_KEEP_0__: 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 이는 사용자 지정 맵입니다: 주요 버전 => 퍼센티지
  • 만약에 원격 데이터를 선호한다면, 사용하세요 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 }] }

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 설정만 사용하는 대신 이 플러그인을 사용하는 이유

Section titled “Why use this plugin instead of only Capacitor config”

Capacitor은 정적 최소 체크를 지원합니다.

android: {
minWebViewVersion: 124,
},
server: {
errorPath: 'unsupported-webview.html',
}

이 플러그인은 런타임 이벤트 및 네이티브 프롬프트 UX를 추가하여 사용자가 업데이트를 권장받으면서도 앱을 여전히 열고 사용할 수 있도록 합니다.

평가 순서:

  1. 제공된 경우 (+데이터셋) 장치 공유 임계값 모드minimumDeviceSharePercent 최신 버전 모드 (
  2. 최소 주요 버전 fallback (latestVersion / latestVersionApiUrl)
  3. protectedTokensminimumMajorVersion)

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 for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities 원시 기능을 위한 구현 세부 정보 @capgo/capacitor-live-activities Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, and @capgo/capacitor-video-player 원시 기능을 위한 구현 세부 정보 @capgo/capacitor-video-player.