11-01 00:04
Notice
Recent Posts
Recent Comments
관리 메뉴

Scientific Computing & Data Science

[WebApp / Node Webkit] Example 12 - Notifications Example 본문

Programming/Web App

[WebApp / Node Webkit] Example 12 - Notifications Example

cinema4dr12 2016. 2. 13. 14:05

 

이번 글에서는 채팅 등의 메시지 앱에 사용되는 알림(Notifications) 기능을 Node Webkit에서 구현하는 방법에 대하여 알아보도록 하겠다.

공개된 라이브러리를 사용하는 것인만큼 구현하는 것은 간단하고도 빠르다. 

우선 다음 GitHub 페이지에서 라이브러리(예제)를 다운받는다: https://github.com/robrighter/nw-desktop-notifications

써보니 쓸만한 라이브러리라 생각되기는 하지만 이미 3년 전에 GitHub 최초 커밋된 이후에 완벽하다고 생각해서인지 한 번도 추가로 커밋된 적이 없다.

소스를 분석해 보면 알겠지만, 예제에서 [Notify] 버튼을 클릭하면 상단에 알림 메시지가 뜨고 잠시 후 사라지는데 HTML로 된 앱이 그 위치에 나타났다 사라지도록 한 것이다.

파일 구성

예제 파일 구성은,


package.json (manifest file)

index.html (entrance point)

nw-desktop-notifications.html (notification page)

nw-desktop-notifications.js (notifications JS library)

desktop-notify.png (icon)
이며 nw-desktop-notifications.jsnotify() 함수를 사용하여 Notifications를 구현한다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function notify(icon, title, content, onClick){
    if(!gui){
        return false;
    }
    if(!window.LOCAL_NW.DesktopNotificationsWindow){
        makeNewNotifyWindow();
    }
    var continuation = function(){
        appendNotificationToWindow(icon, title, content, onClick);
        slideInNotificationWindow();
        $(window.LOCAL_NW.DesktopNotificationsWindow.window.document.body).find('#shouldstart').text('true');    
    };
    if(window.LOCAL_NW.DesktopNotificationsWindowIsLoaded){
        continuation();
    }
    else{
        window.LOCAL_NW.DesktopNotificationsWindow.on('loaded',continuation);    
    }
    return true;
}
cs

사용법

우선 HTML 파일에 다음 JS 소스를 포함시킨다:


<script src="nw-desktop-notifications.js"></script>


Notifications를 구현하는 함수 Prototype은 다음과 같으며:


window.LOCAL_NW.desktopNotifications.notify(iconUrl, title, content, clickHandlerCallback);


HTML에서는 다음 예와 같이 사용되었다:


<script type="text/javascript">

    ...
    
    window.LOCAL_NW.desktopNotifications.notify(icon, title, content, function() {
        // FUNCTION HANDLE...
    });
    
    ...
    
</script>


아래 이미지는 예제 소스로부터 약간의 수정을 하여 실행한 예이다.

전체 화면에서 우측 상단을 주목하자.



우측 상단의 영역을 확대해보면 다음 이미지와 같다.


예제 다운로드

Windows용 예제 다운로드

Mac용 예제 다운로드


Comments