通知アクション(Chrome 48)

2015 年初頭に、Android 版とパソコン版の Chrome にプッシュ メッセージと通知を導入しました。これはウェブの大きな進歩でした。ユーザーは、ブラウザを閉じていてもウェブでの体験をより深く楽しむことができます。

これらのメッセージを送信できることは便利ですが、それらのメッセージに対して行えた操作は、クリックしてページを開くか、完全に閉じるかのいずれかでした。

iOS や Android などのモバイル プラットフォームのアプリにネイティブで提供される通知を見ると、ユーザーが呼び出して操作できるコンテキスト アクションをデベロッパーが定義できます。Chrome 48 では、デスクトップ版と Android 版 Chrome のウェブ通知に同様の機能が追加されました。

通知のスクリーンショット

API への追加は非常に簡単です。アクションの配列を作成し、ServiceWorker の登録から showNotification を呼び出すときに、その配列を NotificationOptions オブジェクトに追加するだけです(ServiceWorker 内で直接、または navigator.serviceWorker.ready を介してページ上で呼び出します)。

現在、Chrome でサポートされているのは、通知ごとに 2 つのアクションのみです。プラットフォームによっては、より多くの文字列をサポートできるものもあれば、サポートできる文字列が少ない、またはまったくサポートしていないものもあります。プラットフォームでサポートされている内容は、Notification.maxActions を確認することで確認できます。次の例では、プラットフォームが 2 つのアクションをサポートしていると仮定しています。

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like'},
    {action: 'reply', title: 'Reply'}]
});

これにより、2 つのボタンを含むシンプルな通知が作成されます。なお、アクションにアイコンを直接追加することは(現時点では)できませんが、絵文字と拡張 Unicode 文字セットを使用して、通知ボタンにコンテキストを追加できます。

次に例を示します。

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

通知を作成して 😻? にしたら、ユーザーが将来的に通知を操作する可能性があります。現在(Chrome 48 時点)では、通知の操作はすべて、サービス ワーカーに登録された notificationclick イベントを介して行われます。通知の一般的なクリックや、いずれかのアクション ボタンの特定のタップが該当します。なお、今後はnotificationcloseイベントにも対応できるようになります。

ユーザーが行ったアクションを把握するには、イベントの action プロパティを検査する必要があります。その後、ユーザーがアクションを完了できるように新しいページを開くか、バックグラウンドでタスクを実行するかを選択できます。

self.addEventListener('notificationclick', function(event) {
  var messageId = event.notification.data;

  event.notification.close();

  if (event.action === 'like') {
    silentlyLikeItem();
  }
  else if (event.action === 'reply') {
    clients.openWindow("/messages?reply=" + messageId);
  }
  else {
    clients.openWindow("/messages?reply=" + messageId);
  }
}, false);

興味深いのは、アクションで新しいウィンドウを開く必要はなく、ユーザー インターフェースを作成せずに一般的なアプリ操作を実行できることです。たとえば、ユーザーがソーシャル メディアの投稿を「高評価」または「削除」すると、ユーザーのローカルデータに対してアクションが実行され、UI を開かずにクラウドと同期されます(ただし、UI を更新できるように、開いているウィンドウにデータ変更を通知することをおすすめします)。ユーザーの操作が必要なアクションの場合は、ユーザーが返信できるウィンドウを開きます。

プラットフォームによってサポートされるアクションの数は異なり、通知アクション ボタンをサポートしていないプラットフォームもあります。そのため、通知をクリックしたユーザーが期待するタスクに常に適切なフォールバックを提供する必要があります。

実際に試すには、Peter Beverloo の通知テストハーンを参照し、通知の仕様を確認するか、仕様が更新されるたびに確認してください。