Using Web Notifications

요약

Web Notifications API 는 시스템 레벨에서 페이지 바깥에 알림을 보내도록 해 줍니다. 비록 어플리케이션이 유휴상태이더라도 웹앱이 사용자에게 정보를 보내도록 허용 합니다.. 한가지 분명한 사용방식은 사용자가 다른 앱을 사용하고 있을 때, 웹메일 앱이 새 이메일을 받았다고 알려 주는 것입니다.

권한 요청하기

웹 컨텐츠

앱이 알림을 보내기전에 사용자는 반드시 어플리케이션에 권한을 승인해 주어야 합니다. 이는 API가 웹페이지 외부와 상호작용 하기 위한 공통 된 조건입니다. 이로써, 사용자들에게 스팸 알림을 피할 수 있습니다.

알림을 보내는 어플리케이션은 읽기 전용 Notification.permission 속성을 통해 현재 퍼미션을 체크합니다  이는 세 가지 값을 가질 수 있습니다.

• default: 사용자가 어떠한 권한도 부여하지 않음 (따라서 사용자에게 알림이 오지 않음)
• granted: 사용자가 의도적으로 어플리케이션으로 부터 알람을 받도록 허가함.
• denied: 사용자가 의도적으로 어플리케이션으로 부터 알람을 거부함.

만약 퍼미션이 허용되지 않았다면 어플리케이션은 사용자가 권한을 선택 할 수 있도록 Notification.requestPermission() 함수를 사용해야만 합니다. 이 메소드는 권한을 사용자가 선택한 권한을 받아오는 콜백함수를 인자로 가집니다.

아래는 앱을 초기화 하는 시점에서 권한을 요청하는 기본적인 예제 입니다:

window.addEventListener('load', function () {
  Notification.requestPermission(function (status) {
    // This allows to use Notification.permission with Chrome/Safari
    if (Notification.permission !== status) {
      Notification.permission = status;
    }
  });
});

설치된 어플리케이션

어플리케이션이 설치 되었을 때, 사용자는 application manifest 에 권한을 직접추가함으로써 알림을 피하는 것이 가능합니다. 

"permissions": {
  "desktop-notification": {
    "description": "Allows to display notifications on the user's desktop."
  }
}

알림 만들기 

 Notification 생성자를 이용하여 간단히 알림을 만들 수 있습니다. 이 생성자는 알림 시 표시되는 제목과 icon, body 와 같이 각각 아이콘, 텍스트 옵션을 인자로 가집니다.

A notification is displayed as soon as possible when instantiated. To track the current state of a notification, four events are triggered at the Notification instance level:

알림은 초기화 되는 대로 표시됩니다. 알림의 현재 상태를 추적하기 위해 Notification 인스턴스에서는 아래 네 가지의 이벤트를 처리합니다.

• show: 알림이 사용자에게 표시 되는 경우.
• click: 알림이 사용자에 의해 클릭 되는 경우.
• close: 알림이 닫힌 경우.
• error: 알림을 표시함에 있어 뭔가 문제가 있는 경우 (대개 어떤 무엇인가가 알림이 표시되는 것을 막은 경우 발생)

이 이벤트들은 이벤트 핸들러에 의해 처리됩니다.

onshow, onclick, onclose 또는 onerror. 이 들은 addEventListener() 메소드를 사용할 수 있습니다. Notification 역시 EventTarget 을 상속하는 메소드 이기 때문입니다. 

var n = new Notification("Hi!");

n.onshow = function () { 
  setTimeout(n.close, 5000); 
}

간단한 예제

아래와 같은 HTML 코드가 있다고 가정해봅시다.

<button>Notify me!</button>

이는 아래와 같은 방법으로 다룰 수 있습니다.

window.addEventListener('load', function () {
  // At first, let's check if we have permission for notification
  // If not, let's ask for it
  if (Notification && Notification.permission !== "granted") {
    Notification.requestPermission(function (status) {
      if (Notification.permission !== status) {
        Notification.permission = status;
      }
    });
  }

  var button = document.getElementsByTagName('button')[0];

  button.addEventListener('click', function () {
    // If the user agreed to get notified
    if (Notification && Notification.permission === "granted") {
      var n = new Notification("Hi!");
    }

    // If the user haven't tell if he want to be notified or not
    // Note: because of Chrome, we are not sure the permission property
    // is set, therefore it's unsafe to check for the "default" value.
    else if (Notification && Notification.permission !== "denied") {
      Notification.requestPermission(function (status) {
        if (Notification.permission !== status) {
          Notification.permission = status;
        }

        // If the user said okay
        if (status === "granted") {
          var n = new Notification("Hi!");
        }

        // Otherwise, we can fallback to a regular modal alert
        else {
          alert("Hi!");
        }
      });
    }

    // If the user refuse to get notified
    else {
      // We can fallback to a regular modal alert
      alert("Hi!");
    }
  });
});

실제 결과는 여기서 확인 해 보세요.

반복 알림 다루기

너무 많은 알림이 발생하는 경우 사용자가 괴로울 수 있습니다. 예를 들어, 문자 메시지 앱이 메시지가 올 때마다 알림을 한다고 해보겠습니다. 수백개의 불필요한 알림을 피하기 위해 대기중인 알림 큐를 활용하는 방법이 있습니다.

이렇게 하려면 새로운 알림에 태그를 추가하면 됩니다. 만약에 알림이 같은 태그를 가졌는데 아직 표시 되기 전이라면, 새 알림은 이전의 알림을 대체하게 됩니다. 만약에 태그가 같고 이미 표시가 되었다면 이전 알림은 닫히고 새로운 알림이 표시 됩니다.

태그 예제

아래와 같은 HTML 코드가 있다고 하겠습니다.

<button>Notify me!</button>

아래와 같은 방법으로 다수의 알림을 다룰 수가 있습니다.

window.addEventListener('load', function () {
  // At first, let's check if we have permission for notification
  // If not, let's ask for it
  if (Notification && Notification.permission !== "granted") {
    Notification.requestPermission(function (status) {
      if (Notification.permission !== status) {
        Notification.permission = status;
      }
    });
  }

  var button = document.getElementsByTagName('button')[0];

  button.addEventListener('click', function () {
    // If the user agreed to get notified
    // Let's try to send ten notification
    if (Notification && Notification.permission === "granted") {
      for (var i = 0; i < 10; i++) {
        // Thanks to the tag, we should only see the "Hi! 10" notification
        var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
      }
    }

    // If the user haven't tell if he want to be notified or not
    // Note: because of Chrome, we are not sure the permission property
    // is set, therefore it's unsafe to check for the "default" value.
    else if (Notification && Notification.permission !== "denied") {
      Notification.requestPermission(function (status) {
        if (Notification.permission !== status) {
          Notification.permission = status;
        }

        // If the user said okay
        if (status === "granted") {
          for (var i = 0; i < 10; i++) {
            // Thanks to the tag, we should only see the "Hi! 10" notification
            var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
          }
        }

        // Otherwise, we can fallback to a regular modal alert
        else {
          alert("Hi!");
        }
      });
    }

    // If the user refuse to get notified
    else {
      // We can fallback to a regular modal alert
      alert("Hi!");
    }
  });
});

실제 결과를 확인 해 보세요.

명세

브라우저 호환

Gecko notes

• Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the navigator.mozNotification object through its createNotification method.
• Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show method and was supporting the click and close events only.
• Nick Desaulniers has written a Notification shim to cover both newer and older implementations.
• One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png. You also can't use window.location.origin + "/my_icon.png" because window.location.origin is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately with the icon missing, then the icon is fetched, but it works on all versions of Firefox OS.

Chrome notes

• Prior to Chrome 22, the support for notification was following an old prefixed version of the specification and was using the navigator.webkitNotifications object to instantiate a new notification.
• Prior to Chrome 32, Notification.permission was not supported.

Safari notes

• Safari started supporting notification with Safari 6 but only on Mac OSX 10.8+ (Mountain Lion).

See also

• Notification