시작하기
설치 단계와 이 플러그인의 전체 마크다운 가이드를 포함한 설정 프롬프트를 복사하세요.
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-network-diagnostics`
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/network-diagnostics/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-network-diagnostics` plugin in my project.만약 Manual Setup을 선호한다면, 다음 명령어를 실행하고 아래의 플랫폼별 지침을 따르면 플러그인을 설치할 수 있습니다.
npm install @capgo/capacitor-network-diagnosticsnpx cap syncImport
Importimport { NetworkDiagnostics } from '@capgo/capacitor-network-diagnostics';전체 네트워크 진단 보고서를 실행
전체 네트워크 진단 보고서를 실행하는 것은 사용자가 제한된 네트워크에서 지원 보고서를 수집하는 가장 빠른 방법입니다.runDiagnostics 복사
const report = await NetworkDiagnostics.runDiagnostics({ urls: [{ url: 'https://api.example.com/health', method: 'HEAD' }], ports: [{ host: 'api.example.com', port: 443 }], websockets: [{ url: 'wss://ws.example.com/socket' }], download: { url: 'https://speed.example.com/5mb.bin', maxBytes: 5 * 1024 * 1024, }, packetLoss: { mode: 'tcp', host: 'api.example.com', port: 443, count: 10, },});
console.log(report.status.connectionType);console.log(report.issues);protectedTokens
네트워크 상태 확인const status = await NetworkDiagnostics.getNetworkStatus();
console.log(status.connected);console.log(status.connectionType);console.log(status.internetReachable);console.log(status.captivePortal);플랫폼에 따라 정확한 플래그가 달라집니다. Android는 유효한 인터넷 및 캡티브 게이트웨이 상태를 보고할 수 있습니다. iOS는 경로 상태, 인터페이스 유형, 비용이 높은 경로 및 제약된 경로를 통해 Network.framework.
테스트 API 접근성
Section titled “Test API reachability”const result = await NetworkDiagnostics.testUrl({ url: 'https://api.example.com/health', method: 'HEAD', timeoutMs: 5000, followRedirects: true,});
if (!result.reachable) { console.warn(result.errorCode, result.errorMessage);}실제 백엔드에서 건강한 엔드포인트를 사용하세요. 브라우저만으로 체크하는 경우 WebView, CORS, 프록시, 또는 캡티브 게이트웨이 동작으로 숨겨질 수 있습니다. 이 플러그인은 네이티브 네트워킹을 사용합니다.
TCP 포트 테스트
네트워크 상태 확인const port = await NetworkDiagnostics.testPort({ host: 'api.example.com', port: 443, timeoutMs: 3000,});
console.log(port.open, port.durationMs);Wi-Fi 접근 포인트가 비표준 포트, MQTT, 커스텀 게이트웨이, 또는 개인 백엔드에 대해 차단하는 경우에도 일반적인 브라우징이 허용되는 경우 유용합니다.
웹소켓 연결 테스트
웹소켓 연결 테스트const socket = await NetworkDiagnostics.testWebSocket({ url: 'wss://ws.example.com/socket', timeoutMs: 5000,});
console.log(socket.open, socket.statusCode);프록시나 캡티브 게이트웨이가 HTTPS 페이지를 허용하지만 웹소켓 업그레이드 요청을 차단하는 경우 사용하세요.
다운로드 속도 측정
다운로드 속도 측정const speed = await NetworkDiagnostics.testDownloadSpeed({ url: 'https://speed.example.com/5mb.bin', maxBytes: 5 * 1024 * 1024, timeoutMs: 30000,});
console.log(speed.mbps);자신의 정적 파일 엔드포인트를 사용하여 결과가 앱이 필요로 하는 네트워크 경로를 반영하도록 하세요.
패킷 손실 추정
패킷 손실 추정const loss = await NetworkDiagnostics.testPacketLoss({ mode: 'tcp', host: 'api.example.com', port: 443, count: 10, timeoutMs: 3000, intervalMs: 250,});
console.log(loss.lossPercent);RAW ICMP ping은 앱 스토어와 플레이 스토어 앱에서 사용할 수 없습니다. 이 방법은 TCP 또는 HTTP 프로브를 반복하여 애플리케이션 수준의 패킷 손실을 측정합니다.
웹 폴백
Web fallback개발을 위한 웹 구현입니다. 브라우저는 raw TCP 소켓을 열 수 없으며 CORS로 URL 확인이 제한될 수 있습니다. iOS 또는 Android 빌드에서 실제 지원 진단을 위해 사용하세요.