나의 개발 일상 기록
[FCM] FireBase를 활용한 Web Push Alarm 본문
FireBase를 활용한 Web Push Alarm
사전 작업
1. Firebase 프로젝트 생성
https://console.firebase.google.com/
위의 url을 접속하여 Friebase 프로젝트를 생성합니다. 프로젝트 생성 과정은 간단하여 생략하였습니다.
2. Web 추가
아래의 그림에서 Web(3번째 아이콘)아이콘을 클릭하여 Web을 생성합니다.
내 웹 닉네임을 본인이 원하는 명으로 기입 후 앱 등록 버큰을 클릭합니다.
<script> 태그 사용을 선택 후 [콘솔로 이동] 버큰을 클릭합니다.
3. 프로젝트 새 비공개 키 생성
프로젝트 진입 후 좌측 상단에 아래의 그림에 표시된 문양을 클릭 후 프로젝트 설정을 클릭합니다.
프로젝트 설정 화면에서 상단의 Tab 메뉴에서 서비스 계정을 선택합니다.
서비스 계정 Tab을 선택하면 [새 비공개 키 생성] 버튼을 클릭하하면 ***.json 파일이 생성됩니다.
4. Script에 설정할 프로젝트 정보 확인
프로젝트 설정 화면에 상단의 Tab 메뉴에서 일반을 선택합니다. 스크롤을 아래로 내리면 SDK 설정 및 구성에 대한 정보를 확인할 수 있습니다. 해당 부분은 추후 Script에서 사용할 정보 입니다.
FCM 작업
FCM Web Push를 구현하기 위해 아래의 그림처럼 Java 및 다른 파일들이 필요합니다. 사전 작업 단계에서 '새 비공개 키 생성' 에서 받은 json 파일은 resources 경로 아래에 위치해 둡니다. (java11, gradle 환경에서 진행하였습니다.)
1. Java 백엔드 작업
Dependecny 설정
build.gradle
dependencies {
// FCM push
implementation 'com.google.firebase:firebase-admin:6.8.1'
}
FCM 초기화
어플맄이션이 시작될 때 Firebas 프로젝트에 본인의 APP을 등록해주어야 합니다. 만일 두번 등록이 되면 에러가 나므로 시작할 때 초기화를 해줍니다.
- FirebaseInt
@Service
public class FirebaseInit {
private static final String path = "fooddelivery-f80a5-firebase-adminsdk-arc1t-21f2efbc96.json";
@PostConstruct
public void init(){
try{
FirebaseOptions options = new FirebaseOptions.Builder()
.setCredentials(
GoogleCredentials.fromStream(
new ClassPathResource(path).getInputStream()
)
).build();
if(FirebaseApp.getApps().isEmpty()){
FirebaseApp.initializeApp(options);
}
}catch (IOException e){
e.printStackTrace();
}
}
}
Send Message
메세지를 보낼 때 토큰과 토픽 방식으로 보낼 수 있습니다. 해당 Service에서는 Token 방식을 채택하여 메세지를 보내보았습니다.
- FCMService
@Slf4j
@Service
public class FCMService {
public void sendFcm(FcmNotificationRequest fcmNotificationRequest) {
Message message = Message.builder()
.setToken(fcmNotificationRequest.getToken())
.setWebpushConfig(WebpushConfig.builder().putHeader("ttl", "300")
.setNotification(new WebpushNotification(fcmNotificationRequest.getTitle(),
fcmNotificationRequest.getMessage()))
.build())
.build();
try{
String response = FirebaseMessaging.getInstance().sendAsync(message).get();
log.info("Sent message: " + response);
}catch (Exception e){
log.error("FCM PUSH ERROR");
log.error(e.getMessage());
}
}
}Message Builder를 통해 메세지를 정삭적으로 보낸다면 response에는 아래의 그림처럼 message return값을 확인이 가능합니다.
* FCMController는 간단히 request 받았을 경우 html로 보내주는 간단한 로직 구성이 되어있고, MvcConfiguration의 경우 html 경로를 설정해주는 코드가 작성이 되어있기에 생략하였습니다.
2. 프론트엔드 작업
firebase-messaging-sw.js 파일 생성
servicework에 등록하기 위해 firebase-messageing-sw.js 파일을 생성합니다. 해당 파일의 명을 동일하게 해주셔야 servicework에 등록이 됩니다.
importScripts('https://www.gstatic.com/firebasejs/5.9.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/5.9.2/firebase-messaging.js');
// Initialize Firebase
let firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();firebaseConfig의 내용은 사전 작업 중 4. Script에 설정할 프로젝트 정보 확인의 내용을 참고하셔서 작성을 하시면 됩니다.
fcm.html 작성
firebaseConfig에 내용에 들어갈 정보 또한 사전 작업 단계에서 4번 내용을 참고하셔서 작성을 해주시면 됩니다.
<!DOCTYPE html>
<html xmlns xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>FCM</title>
</head>
<body>
<h1>Test page!</h1>
<script src="https://www.gstatic.com/firebasejs/5.9.2/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.2/firebase-messaging.js"></script>
<script th:inline="javascript">
let firebaseConfig = {
apiKey: "",
authDomain: ",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.requestPermission()
.then(function() {
return messaging.getToken();
})
.then(async function(token) {
console.log(token);
messaging.onMessage(payload => {
console.log(payload);
})
})
</script>
</body>
</html>화면 초기 진입 시 messaging.requestPermission() 에 의해 Push 알람 권한 요청 화면이 나오게 됩니다.
Token 정보 확인
개발자 도구를 열어 Console를 확인 해보시면 Token 정보가 나오게 되는 것을 확인하실 수 있습니다.
ServiceWork 등록
프론트엔드 작업에서 firebase-messageing-sw.js 파일이 Service Workes에 등록이 됩니다.
Web Push 발송
'Spring' 카테고리의 다른 글
| [Tomcat] JSESSIONID (0) | 2022.03.24 |
|---|---|
| [Spring] TDD(Test-Driven-Development) (0) | 2022.02.22 |
| [Kafka] Kafka Producer&Consumer Application (0) | 2021.10.05 |
| [Kafka] Kafka란? (0) | 2021.10.01 |
| [Spring] 스프링 AOP(Aspect Oriented Programming) (0) | 2021.05.06 |
