api/sample/prod/talk/js/notification.js

import {global} from 'http://talk.kospo.co.kr:3000/static/js/module/variable.js'
import {talkEvent} from 'http://talk.kospo.co.kr:3000/static/js/module/talkEvent.js'
// 브라우저 푸시 설정
let notificationCount = 0;
// 서비스 워커 등록 및 상태 확인
async function registerServiceWorker() {
  if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
    throw new Error('서비스 워커와 푸시 알림이 지원되지 않는 브라우저입니다.');
  }

  try {
    // 기존 서비스 워커 확인
    const existingReg = await navigator.serviceWorker.getRegistration();
    if (existingReg) {
      console.log('기존 서비스 워커 상태:', existingReg.active ? 'active' : 'inactive');
      return existingReg;
    }

    // 새로운 서비스 워커 등록
    const registration = await navigator.serviceWorker.register(global.option.serviceWorkerLocation);
    console.log('서비스 워커 등록 상태:', registration.active ? 'active' : 'pending');

    // 서비스 워커가 활성화될 때까지 대기
    if (!registration.active) {
      await new Promise((resolve) => {
        registration.addEventListener('activate', () => {
          console.log('서비스 워커가 활성화되었습니다.');
          resolve();
        });
      });
    }

    return registration;
  } catch (error) {
    console.error('서비스 워커 등록 실패:', error);
    throw error;
  }
}

// 알림 권한 요청
async function requestNotificationPermission() {
  const permission = await Notification.requestPermission();
  console.log('알림 권한 상태:', permission);
  if (permission !== 'granted') {
    throw new Error('알림 권한이 거부되었습니다.');
  }
  return permission;
}

async function showNotification(obj) {
    console.log('show Notification', obj)
    // const registration = await registerServiceWorker();
    const title = `${obj.workNm}${obj.insName !== null ? '['+obj.insName+']' : ''}`;
    const options = {
        body: obj.message,
        icon: '/talk/image/noti-icon.png',
        tag: `notification`, // 고유한 tag 할당
        renotify: true, // 같은 tag여도 다시 알림
    }

    const notification = new Notification(title, options);

    notification.onclick = (event) => {
        console.log(event)
        const chatFloatingBtn = global.shadowRoot.querySelector('.chat-floating-btn')
        if (!chatFloatingBtn.getAttribute("class").includes('active')) {
            chatFloatingBtn.click()
        }
        talkEvent.messageShow()
        const chatFloating = global.shadowRoot.querySelector('.chat-floating')
        chatFloating.classList.remove('hide')
        global.shadowRoot.querySelector(`div[data-talk-id="${obj.talkId}"]`).click()
        window.focus();

        notification.close()
    };

    notification.onclose = () => {
        // const $chatFloatingBtn = global.shadowRoot.querySelector('.chat-floating-btn')
        // const $chatFloating = global.shadowRoot.querySelector('.chat-floating')
        //
        // $chatFloatingBtn.style.bottom = '30px'
        // $chatFloating.style.bottom = '85px'
    }
}

//
// if ('serviceWorker' in navigator) {
//     navigator.serviceWorker.register('/talk/js/module/service-worker.js')
//         .then(registration => {
//             console.log('Service Worker registered with scope:', registration.scope);
//         })
//         .catch(error => {
//             console.error('Service Worker registration failed:', error);
//         });
// }





export {showNotification, requestNotificationPermission}