PPush 通知を使用すると、アプリのような優れたユーザー エクスペリエンスを提供して、チャット メッセージの受信などの重要なタイムリーな更新を通知できます。通知プラットフォームはブラウザとしては比較的新しく、多くのユースケースや要件が具体化されるのに伴い、通知用の API に多くの追加が行われています。Chrome 50（2016 年 3 月にベータ版をリリース）も例外ではありません。デベロッパーが通知をより細かく制御できるようにする 4 つ以上の新機能があります。以下の機能を利用できます。
- 通知ボタンにアイコンを追加する
- 一貫したエクスペリエンスになるようにタイムスタンプを変更します。
- 通知クローズイベントをトラッキングして 通知の同期や分析に活用します
- 現在表示されている通知が通知に置き換わるときの再通知エクスペリエンスを管理する
Chrome 50 では、プッシュ通知のペイロードも追加されました。Chrome に実装されている Notifications API について最新情報を確認するには、specと仕様 Issue Tracker に従ってください。
カスタム アイコンで魅力的な操作ボタンを作成する
Chrome 49 の通知操作ボタンに関する最近の投稿で、通知ボタンに画像を添付して見やすく魅力的なものにすることはできませんが、絵文字をインライン化するには Unicode 文字を使用できるとお伝えしました。今後は、最近追加された以下の機能により、アクション ボタンに画像を指定できるようになりました。
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
アクション アイコンの外観はプラットフォームによって異なります。たとえば、Android ではアイコンにダークグレーのフィルタが Lollipop 以降で、白いフィルタが Lollipop 以前で適用されますが、パソコンではフルカラーになります。（注: デスクトップでの将来については議論があります）。アクション アイコンを表示できないプラットフォームもあるため、アイコンは、インテントの唯一のインジケーターではなく、アクションのコンテキストを提供するために使用します。
最後に、リソースのダウンロードが必要になるため、アイコンのサイズをできる限り小さくし、インストール イベントで事前にキャッシュしておくことをおすすめします。（この記事の執筆時点では、Chrome での通知リソースのフェッチは、まだ Service Worker を介してルーティングされていません）。
通知終了イベント
通知について頻繁にリクエストされる機能は、ユーザーが通知を閉じたタイミングを把握できる機能です。通知仕様の最近の一連の変更で notificationclose イベントが追加されるまで、これを行う方法がありませんでした。
notificationclick と notificationclose イベントを使用すると、ユーザーが通知をどのように操作しているかを把握できます。長い間開いたままにしているのに、積極的に閉じたり、すぐに行動を起こしたりしているのか。
一般的なユースケースの一つとして、デバイス間での通知の同期が挙げられます。ユーザーがデスクトップ デバイスで通知を閉じた場合、モバイル デバイスでも同じ通知を閉じる必要があります。これを通知せずに行う機能はまだありません（すべてのプッシュ メッセージに通知を表示する必要があります）。しかし、notificationclose を使用すると、これを処理できる機能があるので、サーバー上でユーザーの通知状態を追跡し、ユーザーが使用したときにそれを他のデバイスと同期させることができます。
notificationclose イベントを使用するには、Service Worker 内でイベントを登録します。このイベントは、ユーザーが特定の通知を閉じたり、トレイ内のすべての通知を閉じたときなど、ユーザーが積極的に通知を閉じたときにのみ呼び出されます（Android の場合）。
needInteraction フラグが false であるか未設定の場合、通知がユーザーが手動で非表示にするのではなく、システムによって自動的に閉じられた場合、notificationclose イベントはトリガーされません。
簡単な実装を以下に示します。ユーザーが通知を閉じると、カスタム ロジックを実行できる通知オブジェクトにアクセスできるようになります。
self.addEventListener('notificationclose', e => console.log(e.notification));
これは通知生成ツールでテストできます。通知を閉じるとアラートが表示されます。
既存の通知を置き換える場合にユーザーに不快感を与えることがないようにする
ベンおじさんが「大いなる力には大いなる責任が伴う」と言ったとき、彼が「大いなる力には大いなる責任が伴う」と言ったとき、ピーター パーカーの能力ではなく、通知システムについて話していたのは確かです。通知システムは、ユーザーとやり取りするための強力なメディアです。彼らの信頼を悪用するとすべての通知がオフになり、完全に失う可能性があります。
通知を作成する際に、アラート音やバイブレーションによってユーザーの注意を引くように設定できます。また、新しい通知オブジェクトでその「タグ」属性を再利用することで、既存の通知を置き換えることができます。
Chrome 50 より前のバージョンでは、通知を作成したり、既存の通知を置き換えるたびに、バイブレーション パターンやアラート音が鳴り、こうしたことがユーザーの不満の原因となっていました。Chrome 50 では、「renotify」という単純なブール値フラグを使って、再通知中に行う処理を制御できるようになりました。新しいデフォルトの動作では、後続の通知に同じ「タグ」を使用する場合、通知は表示されなくなります。また、デベロッパーはこのフラグを「true」に設定して、ユーザーへの「再通知」を有効にする必要があります。
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
これは通知生成ツールでお試しいただけます。
ユーザーに表示されるタイムスタンプを管理する
Android の Chrome の通知では、デフォルトで作成時刻が右上に表示されます。残念ながら、これはシステムで実際に通知が生成された時間とは異なる場合があります。たとえば、デバイスがオフラインのときにイベントがトリガーされたり、次の会議の通知が表示されたりします。 Chrome 50 では、新しい「timestamp」プロパティが追加されています。これにより、デベロッパーは通知に表示する時刻を指定できます。
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
現在、タイムスタンプは Chrome for Android でのみ表示されます。パソコンでは表示されませんが、モバイルとパソコンの両方で通知の順序に影響します。