[WebApp / Node Webkit] Example 12 - Notifications Example

목 차

1. Example 1 - HelloWorld
2. Example 2 - Context Menu

3. Example 3 - Using Node.js API

4. Example 4 - Using Node.js File System
5. Example 5 - Submenu
6. Example 6 - Tray Icons

7. Example 7 - Custom Window Control

8. Example 8 - Context Menus

9. Example 9 - Window Menus

10.Example 10 - Using Node Modules

11.Example 11 - Using Third Party Modules

 

이번 글에서는 채팅 등의 메시지 앱에 사용되는 알림(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.js의 notify() 함수를 사용하여 Notifications를 구현한다:

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;
}

사용법

우선 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용 예제 다운로드