HTML : HTML5 Notification API를 사용하는 방법 : 예제, 구현

HTML : HTML5 Notification API를 사용하는 방법 : 예제, 구현

 

HTML5는 새로운 것이 아니며 모든 사람들이 들어 보았지만 사람들이 모르는 HTML5의 일부 기능이 있습니다. 대부분의 사람들은 모든 HTML5가 문서에서 사용할 수 있는 header, footer, nav, article, section과 같은 태그라고 생각하지만 많은 사람들은 개발자가 사용할 수 있는 멋진 새 기능 중 일부를 알지 못합니다.

 

• Geolocation API
• HTML5 Details Tag
• HTML5 Form features
• HTML5 Form Validation

• HTML5 Placeholders

 

notification API라는 HTML5의 새로운 기능을 살펴 보겠습니다. Gmail 탭이 열려있는 경우 이 기능을 가장 많이 사용하는 것은 Gmail에서 새 이메일을 알리는 것입니다. 화면 오른쪽 아래에 제목과 메시지가 포함 된 경고 상자가 나타납니다. 이 API를 사용하여 고유 한 알림 메시지를 작성하는 방법을 살펴 보겠습니다.

 

 

 

Browser Support

시작하기에 좋은 곳은 브라우저 지원을 언급하는 것입니다. notification API는 아직 초안 단계이므로 현재 웹 표준이 아닙니다. 이는 모든 브라우저에서 지원되는 것은 아니며 실제로는 웹킷 브라우저에서만 지원됩니다. 

Chrome 19 버전과 Safari 6 버전에서 처음으로 웹킷에 도입되었습니다. 앞으로 다른 브라우저에서 이 기능을 지원할지는 아직 알려지지 않았지만 웹 앱에서 매우 중요한 기능임을 알 수 있습니다.

 

 

Notification API

Notification API에서 사용할 두 가지 개체가 있습니다. 첫 번째 개체는 알림 개체입니다.

 

interface Notification : EventTarget {
 // display methods
 void show();
 void cancel();

 // event handler attributes
 attribute Function ondisplay;
 attribute Function onerror;
 attribute Function onclose;
 attribute Function onclick;
}

 

이것은 알림에 사용할 인터페이스이며, 여기에는 2 개의 메소드와 4 개의 속성이 첨부되어 있습니다.

 

 

Notification Methods

알림 방법은 알림 상자를 표시하거나 숨기는 데 사용됩니다. -show- 이 방법은 알림을 표시합니다

• Cancel - 알림이 표시되고 알림이 현재 표시되어 있으면 숨겨집니다. 알림이 표시되지 않으면 알림이 표시되지 않습니다.

 

Notification Attributes

알림 속성은 알림의 다른 이벤트에서 이벤트 리스너로 사용됩니다. -ondisplay- 알림 상자가 표시 될 때 실행할 기능입니다.

• onerror  - 알림 상자에 오류가있을 때 실행할 기능입니다.
• onclose  - 알림 상자를 닫을 때 실행할 기능입니다. 
• onclick   - 알림 상자를 클릭했을 때 실행할 기능입니다.

 

 

알림에 필요한 두 번째 개체는 창 인터페이스를 통해 웹 페이지에서 사용할 수있는 NotificationCenter 인터페이스입니다.

 

 

interface NotificationCenter {
 // Notification factory methods.
 Notification createNotification(in DOMString iconUrl, in DOMString title, in DOMString body) throws(Exception);
 optional Notification createHTMLNotification(in DOMString url) throws(Exception);

 // Permission values
 const unsigned int PERMISSION_ALLOWED = 0;
 const unsigned int PERMISSION_NOT_ALLOWED = 1;
 const unsigned int PERMISSION_DENIED = 2;

 // Permission methods
 int checkPermission();
 void requestPermission(in Function callback);
}

interface Window {
...
 attribute NotificationCenter webkitNotifications;
...
}

 

notification 센터는 notification 객체를 생성하고 웹 페이지에 notification 객체를 표시 할 권한이 있는지 확인하는 데 사용됩니다. notification 센터에서 사용해야하는 네 가지 방법이 있습니다.

• -createNotification - 통지에 표시 할 권한이 있는 경우이 메소드는 제공된 컨텐츠로 채워진 통지 오브젝트를 작성합니다. 웹 페이지에 알림을 표시 할 권한이 없으면 보안 예외가 발생합니다.
• createHTMLNotification - 웹 페이지에 알림을 표시 할 권한이 있는 경우 채워진 알림을 리턴하는 createNotification 메소드와 유사합니다. 이 메소드는 URL의 매개 변수를 사용하여 HTML을 표시합니다.
• checkPermission-이 웹 페이지에 대한 알림 권한의 정수를 반환합니다. PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1 또는 PERMISSION_DENIED = 2
• requestPermission - 알림 상자를 표시 할 사용자의 권한을 요청합니다.

 

 

 

 

브라우저가 알림 지원

notification API를 사용하여 작업을 수행하려는 경우 먼저 브라우저가 이를 지원하도록 지원하는지 확인해야합니다. webkitNotification에서 간단한 if 문을 사용할 수 있습니다.

/**
 * Check if the browser supports notifications
 * 
 * @return true if browser does support notifications
 */
 function browser_support_notification()
 {
        return window.webkitNotifications;
 }

 

 

 

경고를 표시 할 권한 얻기

사용자에게 알림을 표시하려면 먼저 알림을 표시 할 권한이 있어야합니다. 표시 할 권한을 얻으려면 requestPermission () 메소드를 사용하십시오.

/**
* Request notification permissions
*/
function request_permission()
{
    // 0 means we have permission to display notifications
    if (window.webkitNotifications.checkPermission() == 0) {
        window.webkitNotifications.createNotification();
        } else {
        window.webkitNotifications.requestPermission();
    }
}

 

 

 

일반 텍스트 알림 상자 표시

일반 텍스트 알림 상자를 만들려면 먼저 알림 상자를 표시 할 권한이 있는지 확인해야 합니다. 그렇게하면 이미지, 제목 및 설명에 대한 매개 변수를 전달하는 createNotification () 메소드를 사용하여 새 알림을 작성할 수 있습니다.

 

/**
* Create a plain text notification box
*/
function plain_text_notification(image, title, content)
{
        if (window.webkitNotifications.checkPermission() == 0) {
            return window.webkitNotifications.createNotification(image, title, content);
        }
}

 

 

 

Display HTML Notification Box

알림 상자에 HTML을 표시하려면 알림 상자를 표시 할 권한이 있는지 확인하여 일반 텍스트 알림 상자와 동일한 작업을 수행해야합니다. 그렇게하면 표시 할 HTML URL을 전달하는 알림 상자를 만들 수 있습니다.

/**
 * Create a notification box with html inside
 */
 function html_notification(url)
 {
        if (window.webkitNotifications.checkPermission() == 0) {
            return window.webkitNotifications.createHTMLNotification(url);
        }
 }