1. FCM(Firebase Cloud Messaging)
- Google의 Firebase 플랫폼에서 제공하는 푸시 알림 서비스
- 모바일 앱, 웹 앱, 또는 서버 간에 메시지를 전달할 수 있게 해주는 서비스
- 개발자는 특정 기기나 사용자 그룹에게 실시간으로 알림을 보낼 수 있음
2. 기능
- 푸시 알림
- 개발자는 모바일 또는 웹 앱 사용자에게 푸시 알림을 보낼 수 있음
- 이 알림은 사용자가 앱을 실행하지 않고도 받을 수 있음
- 주제 기반 메시징
- 사용자는 특정 주제를 구독하고, 개발자는 구독한 모든 사용자에게 메시지를 보낼 수 있음
- 타겟팅
- 특정 사용자 그룹, 특정 기기, 앱 인스턴스에 대해 타겟팅된 메시지를 보낼 수 있음
- 클라우드-클라우드 및 클라이언트-클라우드 메시징
- 서버와 클라이언트 간에 실시간 메시징을 지원
- 서버에서 클라이언트로 메시지를 보내거나 클라이언트 간에 메시지를 주고받을 수 있음
3. 라이브러리 추가하기
- firebase를 위한 라이브러리
firebase_messaging: ^15.1.0
firebase_analytics: ^11.3.0 // 푸쉬 알림을 받을 때 필요함- 추가 라이브러리
webview_flutter: ^4.9.0
get: ^4.6.64. 연결 파일 구현하기
import 'package:firebase_messaging/firebase_messaging.dart';
class FirebaseApi {
// Firebase Messaging 인스턴스 생성
final _firebaseMessaging = FirebaseMessaging.instance;
// 알림 초기화 함수
Future<void> initNotifications() async {
// 사용자에게 알림 권한 요청 (배지, 알림, 소리 옵션 설정)
await _firebaseMessaging.requestPermission(
badge: true, // 배지 표시 허용
alert: true, // 알림 표시 허용
sound: true, // 알림 소리 허용
);
// 이 기기의 FCM 토큰을 가져옴
final FCMToken = await _firebaseMessaging.getToken();
// FCM 토큰을 출력 (보통 서버로 전송하는 경우)
print('Token: $FCMToken');
// 알림 핸들러 설정
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
print('Message received: ${message.notification?.body}');
});
FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
print('Message clicked: ${message.notification?.body}');
});
}
}5. main.dart 파일에 추가하기
- 임시로 공공 웹사이트의 URL을 사용
- 초기화 설정
- web view를 이용
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'firebase_api.dart';
import 'firebase_options.dart';
final homeUrl = Uri.parse("https://www.example.com"); // 웹뷰에 로드할 URL 설정
void main() async {
WidgetsFlutterBinding.ensureInitialized(); // Flutter의 위젯 시스템 초기화
await Firebase.initializeApp( // Firebase 초기화 (비동기 함수)
options: DefaultFirebaseOptions.currentPlatform, // 현재 플랫폼에 맞는 Firebase 설정 적용
);
// Firebase 알림 초기화 (필요한 경우)
await FirebaseApi().initNotifications();
runApp(const MyApp()); // MyApp 실행
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo', // 앱의 제목 설정
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // 앱의 테마 색상 설정
useMaterial3: true, // Material 3 사용 설정
),
home: const HomePage(), // 앱의 홈 화면으로 HomePage 위젯 설정
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState(); // 상태(State) 클래스 생성
}
class _HomePageState extends State<HomePage> {
late final WebViewController controller; // WebView 컨트롤러 선언
@override
void initState() {
super.initState();
controller = WebViewController() // WebView 컨트롤러 초기화
..setJavaScriptMode(JavaScriptMode.unrestricted) // 자바스크립트 허용 모드 설정
..addJavaScriptChannel(
'Toaster', // 'Toaster'라는 이름의 JavaScript 채널 추가
onMessageReceived: (JavaScriptMessage msg) async {
// WebView의 자바스크립트에서 보낸 메시지를 처리하는 콜백 함수
},
)
..loadRequest(homeUrl); // 설정된 URL 로드
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: WebViewWidget(controller: controller), // WebView를 표시할 위젯
);
}
}
5. Token 값 확인하기
Share article
