리치 알림 API

리치 알림 API를 사용하면 템플릿을 사용하여 알림을 만들고 사용자의 작업 표시줄에 이러한 알림을 표시할 수 있습니다.

표시 방식

리치 알림은 기본, 이미지, 목록, 진행률의 네 가지 유형으로 제공됩니다. 모든 알림에는 제목, 메시지, 알림 메시지 왼쪽에 표시되는 작은 아이콘, 더 밝은 색상의 글꼴로 세 번째 텍스트 필드로 표시되는 contextMessage 필드가 포함됩니다.

기본 이미지:

목록 알림은 목록 항목 수를 표시합니다.

이미지 알림에는 이미지 미리보기가 포함됩니다.

진행률 알림에는 진행률 표시줄이 표시됩니다.

독자층의 행동

ChromeOS에서는 알림이 사용자의 작업 표시줄에 표시되고 사용자가 닫을 때까지 작업 표시줄에 유지됩니다. 작업 표시줄은 모든 새 알림의 수를 유지합니다. 사용자가 작업 표시줄에서 알림을 확인하면 개수가 0으로 재설정됩니다.

알림에는 -2에서 2 사이의 우선순위를 할당할 수 있습니다. 우선순위가 0보다 작은 알림은 ChromeOS 알림 센터에 표시되며 다른 플랫폼에서는 오류가 발생합니다. 우선순위 0은 기본 우선순위입니다. 우선순위가 0보다 큰 알림은 표시 시간이 길어지고 작업 표시줄에 더 많은 우선순위가 높은 알림을 표시할 수 있습니다.

정보를 표시하는 것 외에도 모든 알림 유형에는 최대 두 개의 작업 항목이 포함될 수 있습니다. 사용자가 작업 항목을 클릭하면 앱이 적절한 작업으로 응답할 수 있습니다. 예를 들어 사용자가 '답장'을 클릭하면 이메일 앱이 열리고 사용자가 답장을 완료할 수 있습니다.

개발 방법

이 API를 사용하려면 notifications.create 메서드를 호출하고 알림 세부정보를 options 매개변수를 통해 전달합니다.

chrome.notifications.create(id, options, creationCallback);

notifications.NotificationOptions에는 사용 가능한 알림 세부정보와 세부정보가 표시되는 방식을 정의하는 notifications.TemplateType이 포함되어야 합니다.

기본 알림 만들기

모든 템플릿 유형 (basic, image, list, progress)에는 알림 title 및 message와 알림 메시지 왼쪽에 표시되는 작은 아이콘의 링크인 iconUrl이 포함되어야 합니다.

basic 템플릿의 예는 다음과 같습니다.

var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon"
}

이미지 알림 만들기

image 템플릿 유형에는 알림 내에서 미리보기되는 이미지의 링크인 imageUrl도 포함됩니다.

var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

Chrome 앱에서는 엄격한 콘텐츠 보안 정책으로 인해 이러한 URL이 로컬 리소스를 가리키거나 blob 또는 데이터 URL을 사용해야 합니다. 이미지에 3:2 비율을 사용합니다. 그렇지 않으면 검은색 테두리가 이미지를 둘러쌉니다.

목록 알림 만들기

list 템플릿은 목록 형식으로 items를 표시합니다.

var opt = {
  type: "list",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  items: [{ title: "Item1", message: "This is item 1."},
          { title: "Item2", message: "This is item 2."},
          { title: "Item3", message: "This is item 3."}]
}

진행률 알림 만들기

progress 템플릿은 현재 진행률이 0~100인 진행률 표시줄을 표시합니다.

var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

이벤트 수신 대기 및 이벤트에 응답

모든 알림에는 사용자 작업에 응답하는 이벤트 리스너와 이벤트 핸들러가 포함될 수 있습니다 (see chrome.events 참고). 예를 들어 notifications.onButtonClicked 이벤트에 응답하는 이벤트 핸들러를 작성할 수 있습니다.

이벤트 리스너:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

이벤트 핸들러:

function replyBtnClick {
    //Write function to respond to user action.
}

앱 또는 확장 프로그램이 실행되고 있지 않은 경우에도 알림 이 팝업될 수 있도록 이벤트 페이지 내에 이벤트 리스너와 핸들러를 포함하는 것이 좋습니다.