[ React, TypeScript ] Notification 팝업 알림 띄우기 (창이 최소화 되어도 뜨는 알림)

 

- 요구사항

창이 최소화되어도 뜨는 알림이 있으면 좋겠다. 

 

-> 기존에 snackbar나 useDialog로 띄웠던 팝업 알림은 창이 최소화가 되면 당연히 보이지 않음. 

-> 다른 메소드가 필요

 

그래서 찾아보다가 Notification API를 알게되었다. 

 

https://mingule.tistory.com/68

React에서 Browser Notification (푸시 알림) 구현하기

 

 

https://developer.mozilla.org/ko/docs/Web/API/Notifications_API/Using_the_Notifications_API

알림 API 사용하기 - Web API | MDN

 

이것도 함께 참고하였다. 

 

 

권한 요청하기

암튼 얘를 띄우려면 우선 Notification 권한이 있어야 한다. mdn 문서를 봐보면 권한 획득하는 방법이 나와있다. 

Notification.requestPermission().then(function (result) {
  console.log(result);
});

 

 

이걸 호출하면 위 URL 창쪽에 

 

이런식으로 보인다. 저걸 눌러서 허용을 해주면, 콘솔로그에 granted라고 뜬다.

 

 

 

 

알림 띄우기

    interface NotificationOptions {
        badge?: string;
        icon?: string;
    }
    const notificationRef = useRef<NotificationOptions | null>(null);
    
    
    const onClickSearch = async () => {
        Notification.requestPermission().then(function (result) {
            console.log(result);
        });
        notificationRef.current = new Notification('ㅋㅋㅋㅋ', { badge: '', icon: '' });
        
        ...생략
        }