通知の表示

Alexey Rodionov

Matt Gaunt

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

Peter Beverloo の Notification Generator を使用すると、さまざまなプラットフォームのさまざまなブラウザでさまざまな通知オプションを試すことができます。

ビジュアル オプション

通知を表示するための 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>",
}

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

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

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 の Firefox では次のようになります。

Linux 版の Chrome では、タイトルと本文に大量のテキストがある通知は次のようになります。

Linux 版 Firefox では、通知にカーソルを合わせると本文が折りたたまれ、通知が展開されます。

Windows 版 Firefox でも、同じ通知は次のようになります。

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

Chrome と Firefox は、これらが利用可能なプラットフォームではシステム通知と通知センターを使用します。

たとえば、macOS のシステム通知は、画像とアクション（ボタンとインライン返信）をサポートしていません。

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

icon

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 と仮定すると、192px 以上のアイコンが確実になります。

注: ブラウザによっては、HTTPS 経由で画像を提供する必要がある場合があります。サードパーティのイメージを使用する場合は、この点に注意してください。

バッジ

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 では、通知は次のようになります。

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' がデフォルト値であるため、この型は省略できます。

執筆時点では Chrome と Android 版 Opera のみのサポート対応です。

上記の例では、4 つのアクションが定義されており、表示されるアクションよりも多くのアクションを定義できるようになっています。ブラウザに表示されるアクションの数を確認するには、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.';
}

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

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

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

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

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

パソコンの Chrome で使える最適なサイズは 24px x 24px でした。残念なことに、これは Android では不自然です。

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

• アイコンのカラーパターンを統一し、少なくともすべてのアイコンがユーザーに一貫して表示されるようにします。
• プラットフォームによってはモノクロで表示されることがあります。その場合はモノクロを使用してください。
• サイズをテストして、最適なサイズを見つけます。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 での表示は次のようになります。

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

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

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);

Windows 版 Chrome では、操作ボタンをクリックしなくてもテキスト入力フィールドが常に表示されます。

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

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);

方向

dir パラメータを使用すると、テキストを表示する方向（右から左または左から右）を定義できます。

テストでは、方向はこのパラメータではなくテキストによって主に決定されているようです。仕様によると、これはアクションなどのオプションをレイアウトする方法をブラウザに提案することが意図されていますが、違いはありません。

可能であれば、定義することをおすすめします。そうでなければ、ブラウザは提供されたテキストに従って正しい処理を行います。

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

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

Firefox でカーソルを合わせると、次のように表示されます。

バイブレーション

注意: Android 8 以降では、vibrate のサポートは終了しています。

バイブレーション オプションを使用すると、ユーザーの現在の設定でバイブレーションが許可されている（つまり、デバイスがマナーモードではない）ことを前提として、通知が表示されたときに実行するバイブレーション パターンを定義できます。

バイブレーション オプションの形式は、デバイスを振動させるミリ秒数と、デバイスを振動させないミリ秒数を組み合わせた数値の配列です。

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 は、1970 年 1 月 1 日 00:00:00 UTC（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 の失敗は、通知によって表示される情報に具体性がないことです。

そもそもプッシュ メッセージを送信した理由を検討し、ユーザーがその通知を読んだ理由を理解できるように、すべての通知オプションを使用する必要があります。

正直なところ、例を見ると「私は決してミスはしない」と考えがちです。しかし その落とし穴には 自分が思っているよりも簡単に陥りがちです

回避すべきよくある問題:

• タイトルや本文にウェブサイトの URL を含めないでください。ブラウザの通知にはドメインが含まれるため、ドメインを複製しないでください。
• 入手可能な情報をすべて使用してください。ユーザーがユーザーにメッセージを送信したことでプッシュ メッセージを送信する場合は、タイトルを「New Message」、本文を「Click here to read it」とするのではなく、「John が新しいメッセージを送信しました」というタイトルを使用し、通知の本文をメッセージの一部に設定します。

ブラウザと機能の検出

執筆時点で、通知の機能サポートに関して、Chrome と Firefox では大きな違いがあります。

幸いなことに、window.Notification プロトタイプを確認することで、通知機能のサポートを検出できます。

通知がアクション ボタンに対応しているかどうかを確かめるには、次のようにします。

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

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

他のオプションを使用する場合も、上記と同じ操作を行い、'actions' を目的のパラメータ名に置き換えます。

次のステップ

• ウェブでのプッシュ通知の概要
• プッシュの仕組み
• ユーザーの登録
• 権限の UX
• ウェブプッシュ ライブラリを使用したメッセージの送信
• ウェブのプッシュ プロトコル
• push イベントの処理
• 通知の表示
• 通知の動作
• 一般的な通知パターン
• プッシュ通知に関するよくある質問
• 一般的な問題とバグの報告

Codelab

• プッシュ通知クライアントを作成する
• プッシュ通知サーバーを構築する