SlideShare a Scribd company logo
Web Notification
전용우
알림
• 기존의 알림 방식은 마크업으로 레이어를 보여주는 방식
• 브라우저에서 제공해주는 알림 API을 이용
• 좀 더 쉽게 개발자는 알림 기능을 사용할 수 있음
• 브라우저 마다 동작하는 방식은 제각각
만약, 알림을 계속 준다면?
• 반드시 사용자에게 알림을 받을지 승인을 받고 적용.
• 사용자 이벤트로만 호출 가능.
Notification.requestPermission(function(grant) {
// default : 설정하지 않음
// denied : 거부
// granted : 허락
});
!
Notification.permission; //현재 권한 상태 확인
var noti = new Notification(
"title",//필수
{//옵션
"body" :"body", //내용.
"icon" : "icon.png", //아이콘
"tag" : "group" //tag가 같으면 알람으로 표현
}
);
알림을 주자!
사용자 이벤트
이벤트명 발생 시점
show 알림이 보여질 때
close 알림이 닫혔을 때(close메서드 사용)
click 알림을 클릭했을 때(알림이 닫힘)
error 에러가 발생했을 때
noti.addEventListener(“show”,function(){…});
메서드
메서드명 기능
close 알람을 닫음
noti.close();
버그인듯, 버그아닌, 버그같은 너
• 알림을 클릭하면 알림이 닫히고 click이벤트가 발생함.
• 그럼 close이벤트가 발생하는게 맞는가?
• 일반적으론 발생하지 않지만 firefox os는 close이벤트
가 발생
• show이벤트의 발생시점?
• Notification을 생성하는 것만으로 알림이 나타남.
• 이벤트를 attach하기 전에 알림이 나타나지만, show이
벤트는 발생.
감사합니다.

More Related Content

PPTX
Client side storage in html5
PPTX
Html5 시대의 웹앱 프로그래밍 방식의 변화
PPTX
DoctypeHTML5 (Hyderabad) Presentation on Multimedia
PPTX
Indexed DB
PDF
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...
PDF
Mobile html5 today
PDF
2011 11 2_reconocimiento_arbizu_sesion5
PDF
deview2014
Client side storage in html5
Html5 시대의 웹앱 프로그래밍 방식의 변화
DoctypeHTML5 (Hyderabad) Presentation on Multimedia
Indexed DB
Offline. Na und? Strategien für offlinefähige Applikationen in HTML5 - Herbst...
Mobile html5 today
2011 11 2_reconocimiento_arbizu_sesion5
deview2014

Similar to Web notification (20)

PDF
Progressive Web Apps
PDF
Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)
PDF
Pusher create web notification service via javascript
PDF
Facebook은 React를 왜 만들었을까?
PDF
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
PPTX
.net core 에서 SignalR 사용해보기
PDF
Javascript 조금 더 잘 알기
PDF
20131217 html5
PDF
I/O Extended 2019 Seoul - What's New in Web
PPTX
7. html5 api
PDF
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
PDF
웹개발자가 알아야할 기술
PDF
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
PDF
HTML5 표준 소개 및 현황 (윤석찬)
PDF
Node.js 현재와 미래
PPTX
5-5. html5 connectivity
PDF
Clean Front-End Development
PPTX
Android Network
PDF
[강의자료]+1시간만에+끝나는+직장인+코딩+용어+해설_ver1.2.pdf
PPTX
[115] clean fe development_윤지수
Progressive Web Apps
Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)
Pusher create web notification service via javascript
Facebook은 React를 왜 만들었을까?
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
.net core 에서 SignalR 사용해보기
Javascript 조금 더 잘 알기
20131217 html5
I/O Extended 2019 Seoul - What's New in Web
7. html5 api
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
웹개발자가 알아야할 기술
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
HTML5 표준 소개 및 현황 (윤석찬)
Node.js 현재와 미래
5-5. html5 connectivity
Clean Front-End Development
Android Network
[강의자료]+1시간만에+끝나는+직장인+코딩+용어+해설_ver1.2.pdf
[115] clean fe development_윤지수
Ad

More from yongwoo Jeon (12)

PDF
EcmaScript6(2015) Overview
PPTX
Web Components 101 polymer & brick
PDF
asm.js
PPTX
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
PDF
CoffeeScript
PPTX
모바일 디버깅
PDF
Web component
KEY
Html5 use cases
KEY
Html5 performance
KEY
Devfest
PDF
Scriptable cache
PPTX
Whats jindo
EcmaScript6(2015) Overview
Web Components 101 polymer & brick
asm.js
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
CoffeeScript
모바일 디버깅
Web component
Html5 use cases
Html5 performance
Devfest
Scriptable cache
Whats jindo
Ad

Web notification

  • 3. • 기존의 알림 방식은 마크업으로 레이어를 보여주는 방식 • 브라우저에서 제공해주는 알림 API을 이용 • 좀 더 쉽게 개발자는 알림 기능을 사용할 수 있음 • 브라우저 마다 동작하는 방식은 제각각
  • 4. 만약, 알림을 계속 준다면? • 반드시 사용자에게 알림을 받을지 승인을 받고 적용. • 사용자 이벤트로만 호출 가능. Notification.requestPermission(function(grant) { // default : 설정하지 않음 // denied : 거부 // granted : 허락 }); ! Notification.permission; //현재 권한 상태 확인
  • 5. var noti = new Notification( "title",//필수 {//옵션 "body" :"body", //내용. "icon" : "icon.png", //아이콘 "tag" : "group" //tag가 같으면 알람으로 표현 } ); 알림을 주자!
  • 6. 사용자 이벤트 이벤트명 발생 시점 show 알림이 보여질 때 close 알림이 닫혔을 때(close메서드 사용) click 알림을 클릭했을 때(알림이 닫힘) error 에러가 발생했을 때 noti.addEventListener(“show”,function(){…});
  • 8. 버그인듯, 버그아닌, 버그같은 너 • 알림을 클릭하면 알림이 닫히고 click이벤트가 발생함. • 그럼 close이벤트가 발생하는게 맞는가? • 일반적으론 발생하지 않지만 firefox os는 close이벤트 가 발생 • show이벤트의 발생시점? • Notification을 생성하는 것만으로 알림이 나타남. • 이벤트를 attach하기 전에 알림이 나타나지만, show이 벤트는 발생.