반응형
요즘 웹푸시쪽을 활용하는 사이트들이 늘어났다
그래서 실제로 사용해보기 위해서 진행
1. FIREBASE 등록
1-1. 파이어베이스 앱에 웹등록
1-2. 클라우드 메시징에서 웹 푸시 인증서 키 등
2. 실제 진행
2-1. 루트폴더에 firebase-messaging-sw.js 파일생성
importScripts('https://www.gstatic.com/firebasejs/9.17.1/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.17.1/firebase-messaging-compat.js');
// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
firebase.initializeApp(firebaseConfig);
// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
// If you would like to customize notifications that are received in the
// background (Web app is closed or not in browser focus) then you should
// implement this optional method.
// Keep in mind that FCM will still show notification messages automatically
// and you should use data messages for custom notifications.
// For more info see:
// https://firebase.google.com/docs/cloud-messaging/concept-options
messaging.onBackgroundMessage(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body
//,icon: '/firebase-logo.png'
};
self.registration.showNotification(notificationTitle,
notificationOptions);
});실제 config부분은 변경할것
2-2. 등록페이지 설정 (주의사항 : SSL사용해야됨)
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";
import { getMessaging,getToken,onMessage } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-messaging.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const messaging = getMessaging();
function requestPermission() {
console.log('Requesting permission...');
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('Notification permission granted.');
getToken(messaging).then(function(token){
console.log(token);
}).catch(function(e){
console.log("e",e);
});
}
})
}
requestPermission()
onMessage(messaging, (payload) => {
console.log('Message received. ', payload);
var title = payload.notification.title;
var options = {
body: payload.notification.body
};
var notification = new Notification(title,options);
});
</script>
</head>
<body>
웹푸시 테스트용 사이트
</body>
</html>
해당페이지 실행시 콘솔내용
서비스 워커 실행 확인
3. 푸쉬 전송
전송시 완료 되는거 확인
반응형
'기타' 카테고리의 다른 글
| kobert (0) | 2022.08.04 |
|---|---|
| SSL (0) | 2020.10.05 |
| HTML CSS PRINT영역 (0) | 2018.11.01 |