first
This commit is contained in:
shim
271
layouts/bs4-default/_js/noti.js
Normal file
271
layouts/bs4-default/_js/noti.js
Normal file
@@ -0,0 +1,271 @@
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* FCM(Firebase 클라우드 메시징)을 활용한 포그라운드 알림 처리 (데스크탑 전용)
|
||||
* 참조코드 : https://github.com/firebase/quickstart-js/tree/master/messaging
|
||||
* Licensed under an Apache-2 license.
|
||||
* Firebase Quickstart Samples for Web https://firebase.google.com
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
firebase.initializeApp({'messagingSenderId': fcmSenderId});
|
||||
|
||||
const messaging = firebase.messaging();
|
||||
|
||||
messaging.usePublicVapidKey(fcmVAPID); //FCM 웹 푸시 인증서 키쌍(VAPID)
|
||||
|
||||
const permissionDivId = 'permission_div';
|
||||
const permissionAlertId = 'permission_alert';
|
||||
const tokenDivId = 'token_div';
|
||||
const pushSettingId = 'push_setting';
|
||||
const pushDisabledId = 'push_disabled';
|
||||
const modalNoti = $('#modal-noti');
|
||||
|
||||
if (isNewUser(memberid)) {
|
||||
console.log('새 사용자로 로그인 되었습니다.')
|
||||
deleteToken() // 기존 토큰 삭제
|
||||
window.localStorage.clear(); // 로컬 스토리지 초기화
|
||||
}
|
||||
|
||||
// 인스턴스 ID 토큰이 업데이트되면 콜백이 시작됩니다.
|
||||
messaging.onTokenRefresh(function() {
|
||||
messaging.getToken().then(function(refreshedToken) {
|
||||
console.log('토큰이 새로고침 되었습니다.'); // 새 인스턴스 ID 토큰이 아직 전송되지 않았 음을 나타냅니다.
|
||||
setTokenSentToServer(false);
|
||||
sendTokenToServer(refreshedToken); // 인스턴스 ID 토큰을 앱 서버로 전송합니다.
|
||||
resetNotiUI(); // 새로운 인스턴스 ID 토큰을 표시하고 모든 이전 메시지의 UI를 지웁니다.
|
||||
}).catch(function(err) {
|
||||
console.log('새로 변경된 토큰을 검색 할 수 없습니다. ', err);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// - 앱에 포커스가 있는 동안 메시지가 수신됩니다.
|
||||
messaging.onMessage(function(payload) {
|
||||
console.log('메시지가 도착했습니다. ', payload);
|
||||
|
||||
var result = JSON.stringify(payload, null, 2);
|
||||
var msg = JSON.parse(result);
|
||||
var title=msg.notification.title;
|
||||
var mbody=msg.notification.body;
|
||||
var icon=msg.notification.icon;
|
||||
var _mbody = mbody.replace(/(\n|\r\n)/g, '<br>');
|
||||
console.log(_mbody)
|
||||
|
||||
$.notify({
|
||||
icon: icon,
|
||||
title: title,
|
||||
message: mbody
|
||||
}, {
|
||||
type: 'media',
|
||||
delay: 3000,
|
||||
icon_type: 'image',
|
||||
template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
|
||||
'<img data-notify="icon" class="img-circle pull-left">' +
|
||||
'<span data-notify="title">{1}</span>' +
|
||||
'<span data-notify="message">{2}</span>' +
|
||||
'</div>'
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function resetNotiUI() {
|
||||
clearMessages();
|
||||
showToken('처리중...');
|
||||
setMemberId(memberid) // 로그인 사용자의 아이디를 로컬 스토리지에 저장
|
||||
|
||||
// Get Instance ID token. Initially this makes a network call, once retrieved
|
||||
// subsequent calls to getToken will return from cache. 이후의 getToken의 호출은 캐쉬로부터 돌아옵니다.
|
||||
messaging.getToken().then(function(currentToken) {
|
||||
if (currentToken) {
|
||||
sendTokenToServer(currentToken);
|
||||
updateUIForPushEnabled(currentToken);
|
||||
} else {
|
||||
// Show permission request.
|
||||
if (!isRequestPermission()) {
|
||||
setRequestPermission(false)
|
||||
}
|
||||
console.log('사용할수 있는 인스턴스 ID 토큰이 없습니다. 알림권한을 요청하십시오.');
|
||||
// 알림권한요청 UI 를 보여줌.
|
||||
|
||||
setTimeout(function(){
|
||||
updateUIForPushPermissionRequired();
|
||||
}, 1000);
|
||||
setTokenSentToServer(false);
|
||||
}
|
||||
}).catch(function(err) {
|
||||
console.log('알림권한이 없거나 토큰을 검색하는 중 오류가 발생했습니다. ', err);
|
||||
updateUIForPushDisabled()
|
||||
setRequestPermission(false)
|
||||
});
|
||||
}
|
||||
|
||||
function showToken(currentToken) {
|
||||
// 콘솔과 페이지에서 토큰을 보여줌
|
||||
var tokenElement = document.querySelector('.token');
|
||||
if (tokenElement) {
|
||||
tokenElement.textContent = currentToken;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Rb2에 인스턴스 ID 토큰을 보내세요.:
|
||||
// - 이 앱으로 메시지를 다시 보내세요.
|
||||
// - 주제 토큰 구독 / 탈퇴
|
||||
function sendTokenToServer(currentToken) {
|
||||
if (!isTokenSentToServer()) {
|
||||
console.log('Rb2 서버에 토큰 보내기 중 ...');
|
||||
|
||||
var agent = navigator.userAgent, match;
|
||||
var browser, version;
|
||||
|
||||
if((match = agent.match(/MSIE ([0-9]+)/)) || (match = agent.match(/Trident.*rv:([0-9]+)/))) browser = 'Internet Explorer';
|
||||
else if(match = agent.match(/Chrome\/([0-9]+)/)) browser = 'Chrome';
|
||||
else if(match = agent.match(/Firefox\/([0-9]+)/)) browser = 'Firefox';
|
||||
else if(match = agent.match(/Safari\/([0-9]+)/)) browser = 'Safari';
|
||||
else if((match = agent.match(/OPR\/([0-9]+)/)) || (match = agent.match(/Opera\/([0-9]+)/))) browser = 'Opera';
|
||||
else browser = 'Unknown';
|
||||
|
||||
if(browser !== 'Unknown') version = match[1];
|
||||
|
||||
$.post(rooturl+'/?r='+raccount+'&m=notification&a=save_token',{
|
||||
browser : browser,
|
||||
version : version,
|
||||
token : currentToken
|
||||
},function(response){
|
||||
var result = $.parseJSON(response);
|
||||
console.log('토큰이 저장되었습니다.' + currentToken)
|
||||
});
|
||||
setTokenSentToServer(true);
|
||||
} else {
|
||||
console.log('토큰이 이미 서버에 전송 되었으므로 토큰이 변경되지 않는한 재전송되지 않습니다.');
|
||||
}
|
||||
}
|
||||
|
||||
function isTokenSentToServer() {
|
||||
return window.localStorage.getItem('sentToServer') == 1;
|
||||
}
|
||||
|
||||
function setTokenSentToServer(sent) {
|
||||
window.localStorage.setItem('sentToServer', sent ? 1 : 0);
|
||||
}
|
||||
|
||||
function isRequestPermission() {
|
||||
return window.localStorage.getItem('setRequestPermission') == 1;
|
||||
}
|
||||
|
||||
function setRequestPermission(allow) {
|
||||
window.localStorage.setItem('setRequestPermission', allow ? 1 : 0);
|
||||
}
|
||||
|
||||
function isNewUser(memberid) {
|
||||
return window.localStorage.getItem('setMemberId') != memberid;
|
||||
}
|
||||
|
||||
function setMemberId(memberid) {
|
||||
window.localStorage.setItem('setMemberId', memberid ? memberid : 0);
|
||||
}
|
||||
|
||||
function showHideDiv(divId, show) {
|
||||
const div = document.querySelector('#' + divId);
|
||||
|
||||
if (div) {
|
||||
if (show) {
|
||||
div.style = 'display: visible';
|
||||
} else {
|
||||
div.style = 'display: none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function requestPermission() {
|
||||
console.log('권한 요청 중 ...');
|
||||
messaging.requestPermission().then(function() {
|
||||
var nt_web = ''; //알림수신
|
||||
var nt_fcm = '1'; //푸시 알림수신
|
||||
console.log('알림권한이 부여 되었습니다.');
|
||||
$.notify({message: '알림권한이 부여 되었습니다.'});
|
||||
resetNotiUI();
|
||||
|
||||
$.post(rooturl+'/?r='+raccount+'&m=notification&a=notice_config_user',{
|
||||
sendAjax : true,
|
||||
nt_web : nt_web,
|
||||
nt_email : nt_email,
|
||||
nt_fcm : nt_fcm
|
||||
},function(response){
|
||||
var result = $.parseJSON(response);
|
||||
var error=result.error;
|
||||
if (!error) console.log('웹알림/푸시알림 수신처리 되었습니다.')
|
||||
});
|
||||
|
||||
}).catch(function(err) {
|
||||
var nt_fcm = '';
|
||||
showHideDiv(permissionAlertId, false);
|
||||
showHideDiv(permissionDivId, false);
|
||||
showHideDiv(pushDisabledId, true);
|
||||
console.log('알림을 실행 할수있는 권한이 없습니다.', err);
|
||||
$.notify({message: '알림 권한이 차단 되었습니다.'},{type: 'danger'});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
function deleteToken() {
|
||||
// 인스턴스 ID 토큰 삭제.
|
||||
// [START delete_token]
|
||||
messaging.getToken().then(function(currentToken) {
|
||||
messaging.deleteToken(currentToken).then(function() {
|
||||
console.log('토큰이 삭제 되었습니다.');
|
||||
setTokenSentToServer(false);
|
||||
// [START_EXCLUDE]
|
||||
// 토큰이 삭제되면 관련 UI를 업데이트 합니다..
|
||||
resetNotiUI();
|
||||
// [END_EXCLUDE]
|
||||
}).catch(function(err) {
|
||||
console.log('토큰을 삭제할 수 없습니다. ', err);
|
||||
});
|
||||
// [END delete_token]
|
||||
}).catch(function(err) {
|
||||
console.log('인스턴스 ID 토큰을 가져 오는 중 오류가 발생했습니다. ', err);
|
||||
});
|
||||
}
|
||||
|
||||
// 메시지 모달을 닫고 내용을 초기화 합니다.
|
||||
function clearMessages() {
|
||||
modalNoti.modal('hide')
|
||||
}
|
||||
|
||||
function updateUIForPushEnabled(currentToken) {
|
||||
showHideDiv(permissionAlertId, false);
|
||||
showHideDiv(tokenDivId, true);
|
||||
showHideDiv(pushSettingId, true);
|
||||
showHideDiv(permissionDivId, false);
|
||||
showToken(currentToken);
|
||||
}
|
||||
|
||||
function updateUIForPushDisabled() {
|
||||
showHideDiv(pushDisabledId, true);
|
||||
showHideDiv(permissionAlertId, false);
|
||||
}
|
||||
|
||||
function updateUIForPushPermissionRequired() {
|
||||
if (!isRequestPermission()) {
|
||||
console.log('브라우저 알림 권한요청 이력이 없음')
|
||||
if (!nt_web) {
|
||||
showHideDiv(permissionAlertId, true);
|
||||
} else {
|
||||
console.log('사용자의 모든 알림수신을 차단하였습니다.')
|
||||
}
|
||||
} else {
|
||||
console.log('브라우저 알림 권한요청 이력이 있음')
|
||||
showHideDiv(permissionDivId, true);
|
||||
}
|
||||
}
|
||||
|
||||
//알림권한 요청 alert가 닫혔을때(나중에 설정)
|
||||
$('#permission_alert').on('closed.bs.alert', function () {
|
||||
$.notify({message: '설정 페이지에서 다시 권한설정 할 수 있습니다.'},{type: 'primary'});
|
||||
setRequestPermission(true) // 요청이력을 로컬 스토리지에 저장하여 이후에 띄우지 않음
|
||||
showHideDiv(permissionDivId, true);
|
||||
})
|
||||
|
||||
resetNotiUI();
|
||||
Reference in New Issue
Block a user