Native Bridge 예제 모음

🛠️

종합 기능 테스트

All Native Features

네이티브 앱의 모든 네이티브 기능(위치, 카메라, 알림, 등)을 한 곳에서 테스트할 수 있습니다.

Total Test 100% Coverage

📱

케이스 1: Native WebView

web-bridge.js

네이티브 앱 내 WebView에서 실행되는 환경입니다. Native와 양방향 통신을 하며, FCM은 네이티브 앱이 처리합니다.

파일 크기: 13KB
FCM 처리: 네이티브 앱
개인별 푸시: ✅ 지원
Firebase SDK: 불필요

Native 통신 위치/카메라 스토리지

🌐

케이스 2: 웹 브라우저

native-bridge-fcm.js

순수 웹 브라우저 환경입니다. 브라우저가 직접 Firebase SDK를 사용하여 FCM을 처리합니다.

파일 크기: 50KB+
FCM 처리: 웹 자체
개인별 푸시: ✅ 지원
Firebase SDK: 필수

FCM 토큰 토픽 구독 Web 알림

🔄

케이스 3: 하이브리드

환경 자동 감지

환경을 자동으로 감지하여 적절한 라이브러리를 동적으로 로드합니다. 하나의 HTML로 모든 환경을 지원합니다.

환경 감지: 자동
동적 로딩: 필요한 파일만
유니버설: 모든 환경 지원
최적화: 환경별 최적화

자동 감지 동적 로딩 최적화

⚡

바닐라 JS (기본)

web-bridge.js

Framework 없이 순수 JavaScript로 Native Bridge를 사용하는 예제입니다. Native WebView 환경에서 사용합니다.

Framework: 없음 (바닐라 JS)
환경: Native WebView
복잡도: 낮음
학습: 초급

바닐라 JS 초급

🔥

바닐라 JS (FCM)

native-bridge-fcm.js

Framework 없이 순수 JavaScript로 FCM 푸시를 구현하는 예제입니다. 웹 브라우저 환경에서 사용합니다.

Framework: 없음 (바닐라 JS)
환경: 웹 브라우저
복잡도: 중급
학습: FCM 이해 필요

바닐라 JS FCM

🚚

배달 앱

Delivery App

실시간 위치 추적 및 지도 연동 예제입니다. Leaflet.js를 사용하여 위치를 시각화합니다.

지도 위치 추적

🏥

헬스케어 앱

Healthcare App

걸음 수 측정 및 건강 데이터 관리 예제입니다. 데이터 저장 및 위젯 연동을 보여줍니다.

건강 데이터 저장

📱

소셜 앱

Social App

사진 촬영 및 피드 공유 예제입니다. 카메라 연동 및 알림 기능을 보여줍니다.

카메라 알림

🛍️

쇼핑 앱

Shopping App

상품 목록 및 장바구니 예제입니다. 데이터 저장 및 결제 흐름(모의)을 보여줍니다.

쇼핑 장바구니

🔔

알림 앱

Notification App

다양한 종류의 알림(로컬, 푸시)을 테스트할 수 있는 전용 예제입니다.

알림 테스트 FCM

🧪

기본 테스트 앱

Test App

기본적인 브릿지 통신 기능을 테스트하는 심플한 예제입니다.

🔙

뒤로가기 테스트

Back Button Test

안드로이드 하드웨어 뒤로가기 버튼 이벤트를 제어하는 예제입니다.

📦 Native Bridge 예제 모음

🎯 환경에 맞는 예제를 선택하세요

📱 실전 데모 앱

📚 추가 리소스