FrontEnd/Javascript

[JavaScript] ์›น์—์„œ Push ์•Œ๋žŒ ๋ฐœ์ƒํ•˜๊ธฐ (Web Notification/alert)

๊น€ํ‰๋ฒ”๋‹˜ 2022. 6. 1. 21:42
๋ฐ˜์‘ํ˜•

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

Notifications API์˜ Notification ์ธํ„ฐํŽ˜์ด์Šค๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ฐ์Šคํฌํ†ฑ ์•Œ๋ฆผ์„ ์„ค์ •ํ•˜๊ณ  ๋ณด์—ฌ์ฃผ๋Š”๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

developer.mozilla.org

 

๋ฐ˜์‘ํ˜•