リッチ通知 API

リッチ通知 API を使用すると、テンプレートを使用して通知を作成し、ユーザーの通知領域（システムトレイ）に表示できます。

表示方法

リッチ通知には、基本、画像、リスト、進行状況の 4 種類があります。すべての通知には、タイトル、メッセージ、通知メッセージの左側に表示される小さなアイコン、contextMessage フィールドが含まれます。このフィールドは、3 番目のテキスト フィールドとして薄い色のフォントで表示されます。

基本的な画像:

リスト通知には任意の数のリスト項目を表示できます。

画像通知には画像プレビューが含まれます。

進行状況通知には進行状況バーが表示されます。

オーディエンスの行動

ChromeOS では、通知はユーザーの通知領域（システムトレイ）に表示され、ユーザーが閉じるまで通知領域（システムトレイ）に残ります。システム トレイには、すべての新しい通知の数が表示されます。ユーザーが通知領域で通知を確認すると、カウントはゼロにリセットされます。

通知には -2 ～ 2 の優先度を割り当てることができます。優先度が 0 未満の場合、ChromeOS の通知センターに表示され、他のプラットフォームではエラーが発生します。優先度 0 がデフォルトの優先度です。優先度 > 0 の場合、表示時間が長くなり、システム トレイに表示できる優先度の高い通知の数が増えます。

すべての通知タイプで、情報の表示に加えて、最大 2 つのアクション アイテムを含めることができます。ユーザーがアクション アイテムをクリックすると、アプリは適切なアクションで応答できます。たとえば、ユーザーが [返信] をクリックすると、メールアプリが開き、ユーザーは返信を完了できます。

開発方法

この 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
}

イベントをリッスンして応答する

すべての通知には、ユーザー アクションに応答するイベント リスナーとイベント ハンドラを含めることができます（chrome.events を参照）。たとえば、notifications.onButtonClicked イベントに応答するイベント ハンドラを作成できます。

イベント リスナー:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

イベント ハンドラ:

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

アプリや拡張機能が実行されていない場合でも通知がポップアップ表示されるように、イベント リスナーとハンドラをイベント ページに含めることを検討してください。