Flutter Bridge 예제 모음

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

Flutter Bridge는 두 가지 버전을 제공합니다. 실행 환경에 따라 적절한 예제를 선택하여 구현 방법을 확인하세요.

Flutter WebView 환경: flutter-bridge.js (13KB, FCM은 Flutter가 처리)
웹 브라우저 환경: flutter-bridge-fcm.js (50KB+, FCM을 Web 자체에서 처리)

📖 웹앱 푸시 구현 완벽 가이드 보기

케이스 1: Flutter WebView

flutter-bridge.js

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

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

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

케이스 2: 웹 브라우저

flutter-bridge-fcm.js

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

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

FCM 토큰 토픽 구독 Web 알림

케이스 3: 하이브리드

환경 자동 감지

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

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

자동 감지 동적 로딩 최적화

바닐라 JS (기본)

flutter-bridge.js

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

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

바닐라 JS 초급

바닐라 JS (FCM)

flutter-bridge-fcm.js

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

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

바닐라 JS FCM

📱 실전 데모 앱

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

지도 위치 추적

헬스케어 앱

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

건강 데이터 저장

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

카메라 알림

📚 추가 리소스

버전 비교: 버전 비교 가이드 - 두 버전의 상세 비교

배포 가이드: 배포 방법 가이드 - NPM, CDN, UMD 배포 방법

API 문서: README.md - 전체 API 레퍼런스

개인별 푸시: 개인별 푸시 가이드 - 개인별 푸시 구현 가이드