[JavaScript] 웹에서 Push 알람 발생하기 (Web Notification/alert)

javascript Web Notificaiton

 

🙋‍♀️JavaScript alert 이용하기

자바스크립트에서 알람을 발생하는 것 중에

가장 많이  사용하는 것이 바로 alert이다.

<script>
	alert("알람발생");
</script>

alert 알람 발생

alert으로 알람을 발생시키면 해당 웹에 들어가면 바로 알람을 확인할 수 있다.

하지만 alert의 문제의 경우는 해당 탭에 포커싱이 되어있을 때는 잘 볼 수 있지만

해당 탭에 포커싱이 안되어있을 경우 해당 알람창이 뜨는지를 알 수가 없다.

 

 

🤔HTML5 Web Notification API

HTML에서는 웹페이지에서 알람을 표시하면 페이지 외부에서 표시가 되는 Notification API를 제공한다.

해당 웹페이지가 백그라운드로 돌고 있어도 내가 쓰는기기에서 알람을 볼 수 있는 기능이다.

 

📝Web Notification 사용 조건

해당 기능을 이용하려면 하지만 조건이 있다.

바로 HTML5로 보내는 Notification알람을 받을 권한을 체크해서

허용한 사람들에게만 알람을 줄 수가 있다.

 

 

 

Web Notification 알람 허용 팝업창 띄우기

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

HTML 웹페이지에서 알람 표시 창 띄우기

위 코드를 이용하면 알람 권한을 허용하지 않은 어플리케이션이라면 허용 요청 창을 띄울 수가 있다.

 

 

Web Notification 권한 확인하기

 let permissionCheck = Notification.permission;

위 코드를 확인하면 현재 사이트에 Notification을 허용했는지 아닌지를 체크할 수 있다.

• default : 사용자에게 아직 권한 요구를 하기 전, 알람 표시되지 않음
• granted: 사용자에게 알람 표시를 요구했으며, 사용자가 허용한 상태
• denied : 사용자에게 알람 표시를 요구했으나, 사용자가 거부한 상태

 

 

🙂실제 Web Notification 사용해보기

예시코드

<script>
    function helloWorld(){
        let date = new Date().toLocaleString();
        let notification;
        let notificationPermission = Notification.permission;
        if (notificationPermission === "granted") {
            //Notification을 이미 허용한 사람들에게 보여주는 알람창
            notification = new Notification(`Hello,World!!😍`, {
                body: `재방문일시: ${date}`,
                icon: 'hello.png',
            });
        } else if (notificationPermission !== 'denied') {
            //Notification을 거부했을 경우 재 허용 창 띄우기
            Notification.requestPermission(function (permission) {
                if (permission === "granted") {
                    notification = new Notification(`Hello,World!!😍`, {
                        body: `첫방문일시: ${date}`,
                        icon: 'hello.png',
                    });
                }else {
                    alert("알람 허용이 거부되었습니다.")
                }
            });
        }
    }

    helloWorld();
</script>

Notification 알람 예시

위 코드를 실행한 뒤 허용을 누르면 시스템 알람이 뜨는 것을 확인할 수 있다.

 

👇new Notification 속성

body는 title 밑에 뜨는 텍스트를 입력할 수 있고,

icon을 입력하면 옆에 이미지로 표시될 경로를 입력하면 이미지도 함께 뜨게 된다.

 

자세한 옵션들은 아래 URL을 확인해보자!

https://developer.mozilla.org/ko/docs/Web/API/notification

Notification - Web API | MDN