Notifications API を使用する

注: Mac OS X では通知の表示が異なります。ユーザーには Chrome 独自の通知ではなく、Mac OS X の通知が表示されます。詳しくは、ネイティブ通知システムへの移行をご覧ください。

chrome.notifications API を使用すると、テンプレートを使用して通知を作成し、ユーザーのシステムトレイにその通知を表示できます。

表示形式

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

基本的な通知:

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

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

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

ユーザーの行動

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

通知には、-2 ～ 2 の優先度を設定できます。0 未満の優先度は ChromeOS 通知センターに表示され、他のプラットフォームではエラーになります。デフォルトの優先度は 0 です。優先度が 0 より大きい場合は時間が長くなり、システムトレイには優先度の高い通知がより多く表示されます。

priority の設定は、macOS での通知の順序には影響しません。

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

開発方法

この API を使用するには、notifications.create() メソッドを呼び出し、options パラメータを使用して通知の詳細を渡します。

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

notifications.NotificationOptions には、利用可能な通知の詳細と、その詳細の表示方法を定義する notifications.TemplateType を含める必要があります。

注: GCM との統合を検討してください。拡張機能を開いていないときでも、常にユーザーに最新情報を通知します。gcm-notifications サンプルには、GCM と Rich Notifications API の単純な統合が示されています。

基本的な通知を作成する

すべてのテンプレート タイプ（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 も含まれています。これは、通知内でプレビューされる画像へのリンクです。macOS では、イメージはユーザーに表示されません。

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

リスト通知を作成する

list テンプレートは、items をリスト形式で表示します。macOS では、最初のアイテムのみが表示されます。

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."}]
}```

### Create progress notification {: #progress }

The `progress` template displays a progress bar where current progress ranges from 0 to 100. On macOS the progress bar displays as a percentage value in the notification title instead of in the progress bar.

```js
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.
}

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