Notifications API を使用する

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

表示方法

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

基本的な通知:

リスト通知には、任意の数のリストアイテムを表示できます。

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

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

オーディエンスの行動

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

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

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

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

開発方法

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

await browser.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
}

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

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

イベント リスナー:

browser.notifications.onButtonClicked.addListener(replyBtnClick);

イベント ハンドラ:

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

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