first

sample/dev/talk/js/notification.js

@@ -0,0 +1,102 @@
+import {global} from 'http://devtalk.kospo.co.kr:3000/static/js/module/variable.js'
+import {talkEvent} from 'http://devtalk.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}