자바 스프링 FCM 웹 푸시 기능 구현!

자바 스프링 FCM웹 푸시 기능 구현!

 

* 구글 FCM 프로젝트 등록(Web) 했다고 가정

 

1. index.jsp

------------------------------------------------------------------------------------------------------------------------------

 

<script src="https://www.gstatic.com/firebasejs/6.6.0/firebase-app.js">
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-messaging.js">

 

<script>

// 웹의 Firebase configuration 입력 

// Firebase SDK snippet
var firebaseConfig = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: "",
      measurementId: ""
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
console.log("Firebase Initialize Done");

const messaging = firebase.messaging();

 

// 웹 푸시 인증서 키 입력
messaging.usePublicVapidKey("");

Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('Notification permission granted.');

messaging.getToken().then((currentToken) => {
if (currentToken) {

// 생성된 토큰 조회 (서버에서 토큰으로 보낼때 필요함)
console.log(currentToken)
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
showToken('Error retrieving Instance ID token. ', err);
setTokenSentToServer(false);
});

} 
else {
console.log('Unable to get permission to notify.');
}
});

------------------------------------------------------------------------------------------------------------------------------

 

// index.jsp와 같은 위치에 생성 한다.
2. firebase-messaging-sw.js

------------------------------------------------------------------------------------------------------------------------------

self.addEventListener('push', event => {

console.log(event)

var push_data = eval("(" + event.data.text() + ")");
const title = push_data.notification.title;
const options = {
    body: push_data.notification.body

};
event.waitUntil(self.registration.showNotification(title, options));
});

------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

크롬에서 위와같이 확인 가능 

 

 

 

끘!@#!@#!#!@

 

 

 

참고 : https://yeolco.tistory.com/163