Notifications API を使用する

chrome.notifications API を使用すると、テンプレートを使用して通知を作成し、それらを表示できます。 次の情報が表示されます。

表示形式

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

基本的な通知:

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

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

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

ユーザー行動

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

通知には -2 ～ 2 の優先度を割り当てることができます。ChromeOS では 0 未満の優先度が表示されます 他のプラットフォームでエラーが発生する場合があります。デフォルトの優先度は 0 です。 優先度が 0 より大きい場合、表示時間が長くなります。また、優先度の高い通知もより多く表示できます。 表示されます

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

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

開発方法

この API を使用するには、notifications.create() メソッドを呼び出し、 options パラメータ:

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

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 も含まれています。 表示されます。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 に含めることを検討してください。これにより、 拡張機能が実行されていなくてもポップアップ表示される場合があります。