자바 스프링 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));
});
------------------------------------------------------------------------------------------------------------------------------
크롬에서 위와같이 확인 가능
끘!@#!@#!#!@