CONTENTS
안녕하세요. 탁자킴입니다.
오늘은 제가 사용하고 있는 oopy 서비스의 팁 중 하나인 페이지 알림을 알려드리려고 합니다.
지난 포스팅을 참고하시면 좀더 쉽게 이해하실 수 있으실 거예요
1. Browser notification
이런 경험 하신 적 있으시죠? 어느 블로그나 사이트에 들어갔는데, 알림 권한을 요청하는..
그것에서 착안해서 만든 notification입니다.
만약 들어오시는 분이 알림 거부 하신다면.. 어렵겠지만 우리.. 무심코 허용 누르잖아요?
2. 블로그에 알림 표기하기
우선 oopy.io 에서 code 편집으로 들어갑니다. html 편집에서 <body>를 클릭해주세요.
여기에..살짝 꼼수가 들어갑니다. main페이지 뿐만 아니라 모든 페이지에서 해당 알림이 표시되면 사람들이 싫어하겠죠? 그래서 메인 페이지에서만 작동할 수 있도록 살짝.. 손을봐주겠습니다.
내가 알림을 하고싶은 노션페이지에 위와같이 코드를 적어서 가장 상단에 위치시켜주세요.
<body>
<button id ="my-btn" onclick="calculate()"></button>
</body>
HTML
해당 알림은 사실 버튼을 누를경우에 알림이 와요. 이 버튼을 숨겨두고 메인페이지에서만 자동으로 호출되도록 합니다.
html 편집
<body> 가장 위에 아래 notification코드를 붙여넣어 주세요.
notification code
<!--<button id ="my-btn" onclick="calculate()">calculate</button>-->
<script>document.getElementById("my-btn").click();</script>
<script type="text/javascript">
document.getElementById("my-btn").click();
window.onload = function () {
if (window.Notification) {
Notification.requestPermission();
}
}
function calculate() {
setTimeout(function () {
notify();
}, 5000);
}
function notify() {
if (Notification.permission !== 'granted') {
alert('notification is disabled');
}
else {
var notification = new Notification('탁자킴 유튜브 구독하기', {
icon: 'https://www.vectorico.com/wp-content/uploads/2018/02/youtube-icon-300x300.png',
body: '맥으로 공부하고 맥을 공부하는 맥러닝의 탁자킴입니다.',
image: 'https://www.vectorico.com/wp-content/uploads/2018/02/youtube-icon-300x300.png'
});
notification.onclick = function () {
window.open('https://www.youtube.com/channel/UCwq1IYf7GhmJgJtqjbBX1IA?sub_confirmation=1&feature=subscribe-embed');
};
}
}
</script>
HTML
자세한 코드설명은 생략하고! 우리가 수정해야 할 부분은 function notify() 부분입니다.
1.
해당 부분에 보시면 var notification = ~ 이후에 제가 적어놓은 ‘탁자킴 유튜브 구독하기’ 이부분을 수정해주세요.
2.
icon, body, image 에 해당하는 부분을 본인이 원하는 아이콘, 설명, 이름으로 교체해주세요.
3.
window.open 을 본인이 원하는 url로 수정해주세요.
4.
해당 코드는 5초 이후에 알림이 뜨도록 설정되어 있어요. 수정하시려면 상단에 function calculate() 부분에 5000을 수정해주세요 (ms단위이므로 1000 = 1초 입니다.)
수정을 마치시고 저장 후 왼쪽 하단의 파란색 새로고침 버튼을 눌러주시면! 캐시가 초기화 되면서 곧바로 적용이 됩니다.
3. 적용 확인하기
저는 사파리에서 테스트하지만, 크롬에서도 한번 해보세요!
4. 마무리
오늘은 여러분들과 함께 간단한 script 코드로 알림 기능을 한번 알아봤습니다.
그럼 추후 oopy 컨텐츠로 또 돌아올게요! 감사합니다.