プッシュ通知を使用すると、チャット メッセージの受信など、重要な最新情報をタイムリーにユーザーに知らせることができ、アプリのような優れたエクスペリエンスを提供できます。通知プラットフォームはブラウザでは比較的新しいもので、ユースケースと要件が具体化されるにつれて、通知用の API が次々と追加されています。Chrome 50（2016 年 3 月のベータ版）も例外ではなく、デベロッパーが通知をより細かく制御できる新機能が 4 つも追加されています。次のことができるようになります。
- 通知ボタンにアイコンを追加する
- タイムスタンプを変更して一貫したエクスペリエンスを実現する
- 通知のクローズ イベントをトラッキングして、通知の同期と分析情報を提供します。
- 通知が現在表示されている通知に置き換えられたときの再通知エクスペリエンスを管理します。
Chrome 50 では、プッシュ通知のペイロードも追加されました。Chrome に実装されている Notifications API の最新情報を入手するには、仕様と仕様の 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 イベントを使用すると、ユーザーが通知をどのように操作しているかを把握できます。長時間開いたままにして、その後積極的に閉じているか、すぐに対応しているか。
一般的なユースケースの 1 つは、デバイス間で通知を同期できることです。ユーザーがパソコンで通知を閉じると、モバイル デバイスでも同じ通知が閉じられる必要があります。まだこの処理をサイレントで行う機能はありません（すべてのプッシュ メッセージに通知を表示する必要があります）。しかし、notificationclose を使用すると、サーバー上でユーザーの通知状態を追跡し、ユーザーがデバイスを使用するときに他のデバイスと同期することで、この処理を処理できるようになります。
notificationclose イベントを使用するには、サービス ワーカー内に登録します。このイベントは、ユーザーが通知を積極的に閉じた場合にのみ発生します（たとえば、ユーザーが特定の通知を閉じた場合や、トレイ内のすべての通知を閉じた場合（Android の場合））。
requireInteraction フラグが false の場合、または設定されていない場合、通知がユーザーによって手動で閉じられず、システムによって自動的に閉じられた場合、notificationclose イベントはトリガーされません。
簡単な実装を以下に示します。ユーザーが通知を閉じると、通知オブジェクトにアクセスできるようになります。このオブジェクトからカスタム ロジックを実行できます。
self.addEventListener('notificationclose', e => console.log(e.notification));
これは 通知生成ツールでテストできます。通知を閉じるとアラートが届きます。
既存の通知を置き換える際にユーザーを煩わせないようにする
ベンおじさんが「大きな力には大きな責任が伴う」と言ったのは、ピーター・パーカーの力ではなく、通知システムについて言及していたに違いありません。通知システムは、ユーザーとのやり取りに適した強力なメディアです。信頼を悪用すると、すべての通知がオフになり、ユーザーを完全に失う可能性があります。
通知を作成するときに、音声アラートを作成するか、バイブレーションを発生させてユーザーの注意を引くように設定できます。また、新しい通知オブジェクトで「tag」属性を再利用して、既存の通知を置き換えることもできます。
Chrome 50 より前は、通知を作成または既存の通知を置き換えるたびに、バイブレーション パターンが実行されたり、アラートが鳴ったりしていました。このため、ユーザーの不満を招く可能性がありました。Chrome 50 では、再通知中に発生する処理を「renotify」という単純なブール値フラグで制御できるようになりました。以降の通知に同じ「タグ」を使用する場合の新しいデフォルトの動作はサイレントです。デベロッパーは、フラグを「true」に設定して、ユーザーへの「再通知」を有効にする必要があります。
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
通知生成ツールで試すことができます。
ユーザーに表示されるタイムスタンプを管理する
Android では、Chrome の通知にはデフォルトで右上に作成日時が表示されます。ただし、この日時が、システムによって通知が実際に生成された日時とは限りません。たとえば、デバイスがオフラインのときにイベントがトリガーされた場合や、今後のミーティングに関する通知が表示された場合があります。Chrome 50 では、新しい「タイムスタンプ」プロパティが追加されました。これにより、デベロッパーは通知に表示する時刻を指定できるようになりました。
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
タイムスタンプは現在、Chrome for Android でのみ表示されます。パソコンには表示されませんが、モバイルとパソコンの両方で通知の順序に影響します。