このページは Cloud Translation API によって翻訳されました。

通知の表示

Alexey Rodionov

Matt Gaunt

通知オプションは 2 つのセクションに分かれており、1 つは視覚的な要素（ここではセクション内）、通知の動作面について説明するもの（次のセクション）があります。

さまざまなプラットフォームのさまざまなブラウザで、さまざまな通知オプションを試すことができます Peter Beverloo の通知生成ツール。

ビジュアルオプション

通知を表示するための API はシンプルです。

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

title と options の両方の引数は省略可能です。

タイトルは文字列で、オプションには以下のいずれかを指定できます。

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

ビジュアルオプションを見てみましょう。

通知の UI の切り分け

タイトルと本文のオプション

Windows 版 Chrome で、タイトルとオプションがない場合の通知は次のように表示されます。

Windows 版 Chrome でタイトルとオプションのない通知。

ご覧のとおり、ブラウザ名がタイトルと「新しい通知」として使用されます。プレースホルダ: 使用されます。

プログレッシブウェブアプリケーションがデバイスにインストールされている場合は、代わりにウェブアプリ名が使用されます次のブラウザ名を使用します。

ブラウザ名ではなくウェブアプリ名を含む通知。

次のコードを実行したとします。

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

Linux 版 Chrome では次の通知が表示されます。

Linux 版 Chrome のタイトルと本文付きの通知

Linux の Firefox では、次のようになります。

Linux 版 Firefox でのタイトルと本文のテキストを含む通知

タイトルと本文に多くのテキストを含む通知は、上の Chrome でこのように表示されます。 Linux:

Linux 版 Chrome での長いタイトルと本文のテキストを含む通知。

Linux の Firefox では、通知にカーソルを合わせるまで本文テキストが折りたたまれるため、展開すると、

Linux 版 Firefox での長いタイトルと本文のテキストを含む通知

Linux の Firefox で、マウスのカーソルで通知にカーソルを合わせたときに表示される長いタイトルと本文のテキスト。

Windows 上の Firefox でも、同じ通知は次のように表示されます。

Windows 版 Firefox でのタイトルと本文のテキスト付き通知

Windows 版 Firefox の通知に長いタイトルと本文が表示されるようになりました。

ご覧のとおり、ブラウザによって同じ通知の表示が異なる場合があります。また、同じブラウザでもプラットフォームごとに異なる

Chrome と Firefox は、システム通知と通知センターを使用します。使用できます。

たとえば、macOS のシステム通知は、画像とアクション（ボタンとインライン。

Chrome には、すべてのデスクトッププラットフォーム向けのカスタム通知もあります。有効にするには、Terraform で chrome://flags/#enable-system-notifications フラグを Disabled 状態にします。

アイコン

icon オプションは基本的に、タイトルと本文の横に表示できる小さな画像です。

コードの中で、読み込む画像の URL を指定する必要があります。

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

Linux 版 Chrome では、この通知が表示されます。

Linux の Firefox の場合:

残念ながら、アイコンに使用する画像のサイズについて確かなガイドラインはありません。

Android が 64 dp の画像を必要としているようである（64 ピクセルにデバイスのピクセル比の倍数）。

デバイスの最大ピクセル比を 3 と仮定すると、192 ピクセル以上のアイコンサイズは間違いありません。

バッジ

badge は小さなモノクロアイコンで、ユーザーにもう少し情報を表示する通知の送信元についてユーザーに知らせます。

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

現時点では、バッジは Android 版 Chrome でのみ使用されます。

その他のブラウザ（またはバッジなしの Chrome）では、ブラウザのアイコンが表示されます。

icon オプションと同様に、使用するサイズに関する実際のガイドラインはありません。

Android のガイドラインを詳しく調べる推奨サイズは 24 ピクセルにデバイスのピクセル比を掛けたものです。

つまり、72 ピクセル以上の画像であれば問題ありません（デバイスの最大ピクセル比が 3 の場合）。

画像

image オプションを使用すると、ユーザーに大きな画像を表示できます。これは特にユーザーにプレビュー画像を表示するのに便利です。

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

Linux 版 Chrome では、通知は次のようになります。

Linux 版 Chrome の通知と画像

Android 版 Chrome では、切り抜きとアスペクト比が異なります。

Android 版 Chrome の画像付きの通知

パソコンとモバイルの比率の違いから、提案を行うことは極めて困難です。確認してください。

パソコンの Chrome はスペースを埋めるわけではなく、アスペクト比は 4:3 であるため、おそらく最適なこの比率で画像を配信し、Android で画像を切り抜くというものです。とはいえ、 image オプションは変更される可能性があります。

Android については、ガイドラインは 450 dp にする。

このガイドラインを使用すると、幅 1, 350 ピクセル以上の画像が適しています。

アクション（ボタン）

通知付きのボタンを表示するように actions を定義できます。

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

アクションごとに、title、action（基本的には ID）、icon、 type。タイトルとアイコンは通知に表示されます。この ID は、サービスアカウントをアクションボタンがクリックされたことを示します（詳細については次のセクションで説明します）。タイプ 'button' がデフォルト値であるため、省略できます。

このドキュメントの作成時点では、アクションをサポートしているのは Android 版 Chrome と Opera のみです。

上記の例では、4 つのアクションが定義されています。これは、1 つよりも多くのアクションを定義できることを示しています。表示されます。ブラウザに表示されるアクションの数については、 window.Notification?.maxActions を確認できます。

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

パソコンの場合、操作ボタンのアイコンは色で表示されます（ピンクのドーナツ）。

操作ボタン付きの通知（Linux 版 Chrome）

Android 6 以前では、アイコンの色はシステムのカラーパターンに合わせて調整されています。

操作ボタン付きの通知（Android 版 Chrome）

Android 7 以降では、アクションアイコンがまったく表示されません。

パソコンでの Chrome の動作は、Android に合わせて変更されることが予想されます（つまり、適切なカラーパターンを使用して、アイコンがシステムのデザインに一致するようにします）。それまでの間、アイコンの色を #333333 にすることで、Chrome のテキストの色に合わせることができます。

また、Android ではアイコンが鮮明に見えますが、パソコンでは見えません。

パソコンの Chrome で使える最適なサイズは 24px x 24px です。ひどく不自然に見える。

この違いから得られるベストプラクティスは次のとおりです。

アイコンのカラーパターンに一貫性を持たせ、少なくともすべてのアイコンに一貫性を持たせる表示されます。
プラットフォームによってはモノクロで表示される場合があります。モノクロで表示されるようにしてください。
サイズをテストして、どれが最適かを確認します。128px × 128px は Android では問題ありませんが、低調でした高画質です。
アクションアイコンがまったく表示されないことが予想されます。

通知の仕様では複数のサイズのアイコンを定義する方法を検討していますが、ある程度の時間が必要です

アクション（インライン返信）

通知にインラインリプライを追加するには、'text' タイプでアクションを定義します。

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

Android では次のように表示されます。

Android の通知と返信アクションボタン。

アクションボタンをクリックすると、テキスト入力フィールドが開きます。

テキスト入力フィールドが開いている Android の通知

テキスト入力フィールドのプレースホルダをカスタマイズできます。

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

テキスト入力フィールドのカスタムプレースホルダを使用した Android の通知

Windows 版 Chrome では、アクションをクリックしなくてもテキスト入力フィールドが常に表示されるボタン:

テキスト入力フィールドと返信アクションボタンを備えた Windows の通知

複数のインライン返信を追加したり、ボタンとインライン返信を組み合わせたりすることができます。

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

テキスト入力フィールドと 2 つのアクションボタンを備えた Windows の通知

方向

dir パラメータを使用すると、テキストを表示する方向を定義できます。割り当てられています

テストでは、方向はこれではなくテキストによって主に決まるようでしたパラメータを指定します。仕様上、これはオプションをレイアウトする方法をブラウザに提案することを目的としています。違いは見られませんでした

可能であれば、それを定義するのが最善です。そうでなければ、ブラウザは返されます。

パラメータは auto、ltr、rtl のいずれかに設定する必要があります。

Linux 版 Chrome で使用される右から左に表記する言語は次のようになります。

Linux 版 Chrome で通知に右から左に記述する言語が表示されるようになりました。

Firefox の場合は（カーソルを合わせているとき）次のように表示されます。

Linux 版 Firefox での通知を右から左に記述する言語を表示

バイブレーション

バイブレーションオプションを使用すると、通知のバイブレーションのパターンを定義できます。ユーザーの現在の設定でバイブレーションが許可されていることを前提とします（つまり、デバイスがサイレントモード。

バイブレーションオプションの形式は、数字、ミリ秒でデバイスが振動し、その後に、デバイスが振動するミリ秒数 バイブレーションは設定しません。

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

これは、バイブレーションをサポートするデバイスにのみ影響します。

音

サウンドパラメータを使用すると、通知を受信したときに再生する音を定義できます。

現時点では、このオプションをサポートしているブラウザはありません。

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

タイムスタンプ

タイムスタンプにより、プッシュにつながったイベントが発生した時刻をプラットフォームに通知できる通知が送信されます。

timestamp は 00:00:00 UTC（1970 年 1 月 1 日）からのミリ秒数である必要があります。（UNIX エポック）を使用します。

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

UX のベストプラクティス

通知に関する UX における最大の失敗は、情報に具体的な情報が欠けていることです。表示されます。

そもそもなぜプッシュメッセージを送信したのかを検討し、メッセージに通知オプションは、ユーザーがその通知を読んでいる理由を理解するために使用されます。

正直に言うと、例を見ると「決して間違えることはない」と考えるのは簡単です。しかし、その罠にはまってしまう可能性があります

注意点:

タイトルや本文にウェブサイトを含めないでください。ブラウザでは、ドメイン名が 重複しないようにしてください。
持っている情報をすべて活用します。誰かがプッシュメッセージを送信した場合、「New Message」というタイトルを使用せずに、ユーザーにメッセージを送信したおよび本文です。読む」ものです「太郎さんが新しいメッセージを送信しました」というタイトルを使用する通知の本文をメッセージの一部になります。

ブラウザと機能の検出

執筆時点では、Chrome と Firefox ではユーザーのサポートしています。

幸いなことに、通知機能のサポートは window.Notification 説明します。

通知が操作ボタンをサポートしているかどうかを確認する場合は、次のようにします。

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

これにより、ユーザーに表示する通知を変更できます。

他のオプションを使用する場合は、上記と同じように、'actions' を目的のオプションに置き換えます。パラメータ名を指定します。

通知の表示

ビジュアルオプション

タイトルと本文のオプション

アイコン

バッジ

画像

アクション（ボタン）

アクション（インライン返信）

方向

バイブレーション

音

タイムスタンプ

UX のベストプラクティス

ブラウザと機能の検出

次のステップ

Codelab

通知の表示

ビジュアル オプション

タイトルと本文のオプション

アイコン

バッジ

画像

アクション（ボタン）

アクション（インライン返信）

方向

バイブレーション

音

タイムスタンプ

UX のベスト プラクティス

ブラウザと機能の検出

次のステップ

Codelab

ビジュアルオプション

UX のベストプラクティス