通知アクション(Chrome 48)

2015 年の初めに、Android 版とパソコン版の Chrome にプッシュ通知と通知が導入されました。これはウェブにおける大きな前進でした。ブラウザを閉じているユーザーも、ウェブでのエクスペリエンスをさらに利用できるようになりました。

こうしたメッセージを送信できることは素晴らしいことですが、メッセージをクリックしてページを開くか、完全に閉じるかのいずれかしかできませんでした。

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

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

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

現在、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 以降)通知に対する操作は、Service Worker に登録された 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 による Notification Test Harne のページをご確認いただき、通知の仕様についてご確認いただくか、更新される際は仕様をご確認ください