webkitNotifications

기본 브라우저로 크롬브라우저를 사용하고 있다.

크롬 브라우저에 트위터나 페이스북 플러그인을 설치하면 toast popup과 같은 창으로 알림 메세지를 준다.

이전까지는 아무 생각없이 확인을 하고 플러그인에서 특별히 제공하는 기능으로만 생각을 했었다.

이는 알고보니 크롬에서 window 객체내에 제공하는 webkitNotifications API를 사용하면 쉽게 구현할 수 있는 기능이었다.

프로젝트를 하다가 이러한 기능을 하는 API가 크롬의 webkitNotifications API를 사용하여 구현되어있는 것을 확인하여 정상 동작 여부를 테스트 하였다.

그러나 정상 동작을 하지 않아 여러가지로 알아보고 테스트를 추가적으로 해보았다.

아직 정식 규격이 아니어서 그런가 정확히 기술되어있는 스펙이 없는 듯 하다.

그래서 역시나 선행자님들의 블로그 등을 참고하여 알아낸 정보들을 공유하고자 한다.

지원 브라우저

현재 정식으로 포함되어있는 브라우저는 크롬브라우저 하나 뿐이다.

나는 W3C 규격의 Notification API를 구현해야했는데 이는 인터넷에서 참고한 아래의 Sample 코드에도 포함이 되어 있었다.

그래서 프로젝트 구현에서는 Notification API 내부에 webkitNotifications API가 동작하도록 구현을 해놓았다.

문제 발생 및 해결

처음에는 다른 에러 메세지도 없이 아무런 동작을 하지 않아 퍼미션 승인처리 문제로 보고 확인을 해보았다.

webkitNotifications.checkPermission() API를 통해 퍼미션을 확인하고

webkitNotifications.requestPermission() API로 퍼미션 승인을 받을 수 있는 아래 이미지와 같은 알림 창을 띄우게 되어있으나



내 PC에서의 이미 퍼미션이 승인처리 되어있어서 그런지 강제로 webkitNotifications.requestPermission() 를 호출하면 아래와 같이 브라우저가 깨지는 현상이 발생하였다.




그래서 여러가지로 검색도 해보고 문제점을 찾아봤는데 결과적으로는 설정 문제가 있었다.

설정 > 개인정보 > 콘텐츠 설정 button click > 알림 > '모든 사이트에서 데스크톱 알림을 표시하도록 허용' radio box 설정



이렇게 알림을 표시하도록 허용하면 다음과 같이 브라우저의 우측 하단에 정상적으로 알림창에 뜬다.

webkitNotifications API

간단히 webkitNotifications API 구현하는 방법을 살펴보자.

1. window 객체에 webkitNotifications API가 있는지, 즉 브라우저가 webkitNotifications API를 지원하는지 확인한다.
2. webkitNotifications.checkPermission() 를 호출하여 퍼미션이 승인되어있는지 확인한다. 0 이면 승인, 1 이면 미승인 상태이다.
3. webkitNotifications.createNotification(iconUrl, title, body) 을 호출하여 notification 객체를 생성한다.
   
   • iconUrl : string, 로컬에 있는 이미지는 정상적으로 동작하지 않았다. 이미지 항목을 제거하고자 하면 널 스트링('')을 입력하면 된다.
   • title : string
   • body : string
4. n.show() 를 호출하여 알림을 표시한다.

아직 기초 단계의 API로 display와 관련된 API는 show() 와 cancel() 를 제공하고,

다음과 같은 callback 함수를 제공하고 있다.

• onclick
• onclose
• ondisplay
• onerror
• onshow

Sample Code

< head >

< body >

Web Notifications
Request Permission
Send Notification

참고 사이트

메튜장님 블로그

경준호님 게시글


// PS - 2013.3.20
모바일 Blogger 앱으로 편집을 하면 < pre > 내의 코드의 개행이 모두 제거되어 한줄로 표시되는 문제가 발생한다.

PC 환경에서 일일이 다시 개행해줌. ㅡㅡ;