リッチ通知 API

警告: この記事は、サポートが終了した Manifest V2 バージョンを表示しています。MV3 の同等の機能については、Manifest V3 - リッチ通知をご覧ください。 Chrome ウェブストアでは、Manifest V2 拡張機能の受け入れを終了しました。Manifest V3 移行ガイドに沿って、拡張機能を Manifest V3 に変換します。

プラットフォームの違い: Chrome バージョン 59 では、Mac OS X では通知の表示方法が異なります。ユーザーには、Chrome 独自の通知ではなく、Mac OS X のネイティブ通知が表示されます。詳しくはこちらの記事をご覧ください。

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

表示形式

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

基本的な画像:

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

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

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

オーディエンスの行動

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

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

注: プラットフォームの違い: code の優先度は、macOS の Chrome バージョン 59 以降の通知の順序には影響しません。

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

開発方法

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

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

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 も含まれています。これは、通知内でプレビューされる画像へのリンクです。

プラットフォームの違い: Mac OS X で Chrome バージョン 59 以降を使用しているユーザーには画像は表示されません。

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 をリスト形式で表示します。

プラットフォームの違い: Mac OS X の Chrome バージョン 59 以降のユーザーには、最初のリスト項目のみが表示されます。

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 の進行状況バーを表示します。

プラットフォームの違い: Mac OS X の Chrome バージョン 59 以降では、通知のタイトルに進行状況バーが表示される代わりに、進行状況バーがパーセント値で表示されます。

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

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