通知オプションは 2 つのセクションに分かれています。1 つは視覚的な側面を扱うセクション（このセクション）で、もう 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>",
}
ビジュアル オプションを見てみましょう。
タイトルと本文のオプション
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 オプションは、タイトルと本文の横に表示できる小さな画像です。
コードで、読み込む画像の URL を指定する必要があります。
const title = 'Icon Notification';
const options = {
icon: '/images/demos/icon-512x512.png',
};
registration.showNotification(title, options);
Linux の Chrome に次の通知が表示されます。
Linux の Firefox の場合:
残念ながら、アイコンに使用する画像のサイズに関する確固としたガイドラインはありません。
Android は 64dp の画像を求めているようです（64px にデバイスのピクセル比を掛けたもの）。
デバイスの最大ピクセル比が 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 では、通知は次のように表示されます。
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 つのアクションが定義されています。ブラウザに表示されるアクションの数を確認するには、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 × 24px でした。残念ながら、これは Android では不自然に見えます。
これらの違いから導き出されるベスト プラクティスは次のとおりです。
- アイコンのカラーパターンを統一して、少なくともすべてのアイコンがユーザーに一貫して表示されるようにします。
- 一部のプラットフォームではモノクロで表示されることがあるため、モノクロでも問題なく表示されることを確認してください。
- サイズをテストして、最適なサイズを見つけてください。128 ピクセル × 128 ピクセルは Android では問題ありませんでしたが、デスクトップでは品質が低下しました。
- アクション アイコンはまったく表示されません。
Notification 仕様では、複数のサイズのアイコンを定義する方法が検討されていますが、合意に至るまでには時間がかかりそうです。
アクション（インライン返信）
'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 では（カーソルを合わせると）次のように表示されます。
バイブレーション
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);
これは、バイブレーションをサポートするデバイスにのみ影響します。
サウンド
sound パラメータを使用すると、通知の受信時に再生する音を定義できます。
この記事の執筆時点では、このオプションをサポートしているブラウザはありません。
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 の失敗は、通知に表示される情報の具体性が欠けていることです。
まず、プッシュ メッセージを送信した理由を検討し、すべての通知オプションを使用して、ユーザーがその通知を読んでいる理由を理解できるようにする必要があります。
正直なところ、例を見て「自分はそんな間違いはしない」と思うのは簡単です。しかし、この罠にはまるのは、思っているよりも簡単です。
避けるべきよくある落とし穴:
- タイトルや本文にウェブサイトを記載しないでください。ブラウザは通知にドメインを含めるため、重複させないでください。
- 利用可能な情報をすべて使用します。誰かがユーザーにメッセージを送信したためにプッシュ メッセージを送信する場合は、タイトルを「新しいメッセージ」、本文を「ここをクリックして読む」とするのではなく、タイトルを「John が新しいメッセージを送信しました」とし、通知の本文をメッセージの一部に設定します。
ブラウザと機能の検出
この記事の執筆時点では、通知の機能サポートに関して Chrome と Firefox の間にかなり大きな違いがあります。
幸い、window.Notification プロトタイプを調べることで、通知機能のサポートを検出できます。
たとえば、通知が操作ボタンをサポートしているかどうかを確認するには、次のようにします。
if ('actions' in window.Notification?.prototype) {
// Action buttons are supported.
} else {
// Action buttons are NOT supported.
}
これにより、ユーザーに表示する通知を変更できます。
他のオプションでも、上記と同様に 'actions' を目的のパラメータ名に置き換えます。
次のステップ
- ウェブプッシュ通知の概要
- プッシュの仕組み
- ユーザーの登録
- 権限の UX
- ウェブプッシュ ライブラリを使用したメッセージの送信
- ウェブプッシュ プロトコル
- push イベントの処理
- 通知を表示する
- 通知の動作
- 一般的な通知パターン
- プッシュ通知に関するよくある質問
- 一般的な問題とバグの報告