시작하기

설치

AI-Assisted Setup으로 플러그인을 설치할 수 있습니다. 다음 명령어로 AI 도구에 Capgo 스킬을 추가하세요:

bunx 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.

수동 설정을 선호한다면, 다음 명령어를 실행하여 플러그인을 설치하고 아래의 플랫폼별 지침을 따르세요:

1. 패키지 설치

   bun add @capgo/capacitor-webview-version-checker

2. 네이티브 프로젝트 동기화

   bunx cap sync

3. 선택 사항: 플러그인 설정 추가 기본값으로 실행할 수 있습니다 (WebviewVersionChecker: {}) 또는 prompt 및 threshold 동작을 사용자 정의하려면 capacitor.config.ts.

빠른 시작

import { WebviewVersionChecker } from '@capgo/capacitor-webview-version-checker';

const result = await WebviewVersionChecker.check();
console.log(result);

예시: startMonitoring

import { WebviewVersionChecker } from '@capgo/capacitor-webview-version-checker';

const result = await WebviewVersionChecker.startMonitoring();
console.log(result);

예시: stopMonitoring

import { WebviewVersionChecker } from '@capgo/capacitor-webview-version-checker';

const result = await WebviewVersionChecker.stopMonitoring();
console.log(result);

자주 하는 실수

• 리스너: 화면이 언마운트될 때 핸들을 제거합니다.
• 네이티브 동기화: 실행 bunx cap sync 플러그인 업그레이드 후.
• 신뢰할 수 있는 소스: 신뢰 src/definitions.ts GitHub 레포지토리에서.

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

기본적으로 이 플러그인은 Browserslist 방식의 호환성 규칙을 사용합니다:

• minimumDeviceSharePercent 기본값은 3
• 공유 데이터셋은 build 시점에 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 설정만 사용하는 대신 이 플러그인을 써야 하는 이유

Capacitor는 정적 최소 버전 체크를 지원합니다:

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

이 플러그인은 런타임 이벤트와 네이티브 prompt UX를 추가하여, 사용자가 업데이트를 권장받으면서도 앱을 계속 열고 사용할 수 있게 합니다.

평가 순서:

1. 기기 공유 임계값 모드 (minimumDeviceSharePercent + 데이터셋), 제공된 경우
2. 최신 버전 모드 (latestVersion / latestVersionApiUrl)
3. 최소 메이저 폴백 (minimumMajorVersion)

Android 프로바이더 처리

이 플러그인은 Android에서 Capacitor가 사용하는 두 가지 WebView provider 모델을 모두 지원합니다:

• Android 5-6 및 10+: Android System WebView (com.google.android.webview)
• Android 7-9: Google Chrome ("com.android.chrome)

시작하기 다음 단계

사용 중이라면 시작하기 네이티브 미디어 및 인터페이스 동작을 계획하려면, 이를 다음 항목과 연결하세요: @capgo/capacitor-webview-version-checker 사용하기 @capgo/capacitor-webview-version-checker를 사용하여 네이티브 기능을 구현할 때, @capgo/capacitor-live-activities 사용 @capgo/capacitor-live-activities 사용에서의 네이티브 기능, @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 구현 세부 사항, @capgo/capacitor-video-player 사용 @capgo/capacitor-video-player 사용에서의 네이티브 기능 및 @capgo/capacitor-video-player @capgo/capacitor-video-player.의 구현 세부 사항