リッチ通知 API

Rich Notifications API を使用すると、テンプレートを使用して通知を作成し、 次の情報が表示されます。

表示形式

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

基本的なイメージ:

リスト通知には、任意の数のリストアイテムが表示されます。

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

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

ユーザー行動

ChromeOS では、通知はユーザーのシステムトレイに表示され、 拒否されます。システムトレイには、すべての新しい通知の数が表示されます。ユーザーに 通知がすべて表示されると、カウントはゼロにリセットされます。

通知には -2 ～ 2 の優先度を割り当てることができます。優先事項 <ChromeOS では 0 と表示される 他のプラットフォームでエラーが発生する場合があります。デフォルトの優先度は 0 です。 優先事項 >時間を延長するために 0 が表示され、優先度の高い通知はより頻繁に 表示されます

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

開発方法

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

イベントページ内にイベント リスナーとイベント ハンドラを含めると、通知が アプリや拡張機能が実行されていなくてもポップアップすることがあります。