가이드
Capacitor에서 WebView Crash 사용하는 방법
@capgo/capacitor-webview-crash 사용하기
복구된 WebView crash를 감지하고, 중단된 WebView를 네이티브 방식으로 재시작하며, 메모리 부족(OOM)이 발생하기 전 정해진 간격으로 장기 실행 중인 WebView를 재활용합니다.
설치
npm install @capgo/capacitor-webview-crash
npx cap sync
플러그인 주요 기능
- iOS 및 Android에서 WebView crash 발생 시 네이티브 재시작 지원.
- 며칠씩 실행되는 키오스크, POS, 사이니지, 스캐너 및 대시보드 앱을 위한 정기적 네이티브 WebView 재시작 기능.
restartWebView- 페이지 새로고침 없이 JavaScript에서 새로운 네이티브 WebView를 요청할 수 있습니다.WebViewCrashPluginConfig- 타입plugins.WebViewCrash내의 옵션capacitor.config.ts.getPendingCrashInfo- 저장된 네이티브 크래시 또는 재시작 마커를 반환하거나,null대기 중인 항목이 없을 때.clearPendingCrashInfo- 앱이 상태를 복구한 후 저장된 마커를 삭제합니다.simulateCrashRecovery- 복구 흐름을 로컬에서 테스트할 수 있도록 가짜 크래시 마커를 생성합니다.webViewRestoredAfterCrash- 복구된 런타임에 크래시 마커가 여전히 남아 있을 때 발생하는 리스너 이벤트입니다.webViewRestoredAfterRestart- 네이티브 재시작 마커가 여전히 남아 있을 때 발생하는 리스너 이벤트입니다.
사용 예시
import { WebViewCrash } from '@capgo/capacitor-webview-crash';
await WebViewCrash.addListener('webViewRestoredAfterCrash', async (info) => {
console.log('Recovered after a WebView crash', info);
await WebViewCrash.clearPendingCrashInfo();
});
await WebViewCrash.addListener('webViewRestoredAfterRestart', async (info) => {
console.log('Recovered after a native WebView restart', info);
await WebViewCrash.clearPendingCrashInfo();
});
const pending = await WebViewCrash.getPendingCrashInfo();
// Note: the listener callback may have already cleared the pending marker.
if (pending.value) {
console.log('Pending crash or restart marker', pending.value);
}
네이티브 자동 재시작
다음에서 재시작 동작을 설정하여 capacitor.config.ts JavaScript를 사용할 수 없는 상황에서도 계속 작동하도록 합니다:
import type { CapacitorConfig } from '@capacitor/cli';
import type { WebViewCrashPluginConfig } from '@capgo/capacitor-webview-crash';
const webViewCrash: WebViewCrashPluginConfig = {
restartOnCrash: true,
restartCron: '0 3 * * *',
restartAfterCrashDelayMs: 0,
};
const config: CapacitorConfig = {
plugins: {
WebViewCrash: webViewCrash,
},
};
export default config;
예약된 재시작 설정은 reason: 'periodicRestart'. 사용하세요 restartIntervalMs 를 사용하여 고정된 간격을 설정하거나 restartCron 를 사용하여 기기 로컬 시간대의 5필드 cron 스케줄을 설정할 수 있습니다. 예: 0 3 * * * 매일 03:00에 재시작하도록 설정하세요. 두 스케줄을 동시에 설정하지 마세요. 동시에 설정할 경우 native initialization 과정에서 치명적인 config 에러가 발생합니다. restartCron 가 restartIntervalMs 보다 크면 0 네이티브 초기화 시 치명적인 설정 오류가 발생합니다. 짧은 간격의 스케줄을 사용하기 전에 앱의 중요한 상태를 저장하세요.
수동 네이티브 재시작
호출 restartWebView() JavaScript에서 메모리 집약적인 워크플로우 완료 후와 같이, 네이티브 WebView를 선제적으로 교체해야 한다고 판단할 때 사용합니다:
await WebViewCrash.restartWebView();
이 메서드는 다음을 기록합니다 reason: 'manualRestart' 그리고 네이티브 code에 새 WebView를 만들도록 요청합니다. Android는 호스트 액티비티를 다시 만들고, iOS는 Capacitor 브리지 뷰를 다시 빌드해 새 WKWebView WebView가 현재 페이지를 다시 로드하는 대신 생성됩니다.
전체 레퍼런스
- GitHub: https://github.com/Cap-go/capacitor-webview-crash/
- 문서: /docs/plugins/webview-crash/
@capgo/capacitor-webview-crash 사용하기에서 계속하기
사용 중인 경우 @capgo/capacitor-webview-crash 사용하기 네이티브 미디어 및 인터페이스 동작을 설계하려면, 이를 다음 항목과 연결하세요 @capgo/capacitor-webview-crash @capgo/capacitor-webview-crash의 구현 세부 사항을 확인하세요, 시작하기 시작하기 문서의 구현 상세 내용은, @capgo/capacitor-live-activities 사용하기 @capgo/capacitor-live-activities 사용하기의 네이티브 기능을 위해서는, @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 구현 세부 사항을 위해서는, @capgo/capacitor-video-player 사용하기 @capgo/capacitor-video-player. 사용하기의 네이티브 기능을 위해서는