通知の動作

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

ここまでは、通知の外観を変更するオプションについて説明してきました。通知の動作を変更するオプションもあります。

デフォルトでは、視覚的なオプションのみを指定して showNotification() を呼び出すと、次の動作になります。

  • 通知をクリックしても何も起きません。
  • 新しい通知は順番に表示されます。ブラウザは通知を閉じません。
  • プラットフォームにより、音が鳴ったりユーザーのデバイスが振動したりします。
  • プラットフォームによっては、通知はしばらくすると消えますが、ユーザーが操作しない限り通知が表示され続けるプラットフォームもあります。（たとえば、Android とパソコンの通知を比較します）。

このセクションでは、オプションのみを使用してこれらのデフォルトの動作を変更する方法について説明します。これらは比較的簡単に実装して活用できます。

通知のクリック イベント

ユーザーが通知をクリックしても、デフォルトの動作では何も起こりません。通知を閉じたり削除したりすることもできません。

通知のクリックでは、通常、通知を閉じて他のロジックを実行します（ウィンドウを開く、アプリケーションに対して API 呼び出しを行うなど）。

そのためには、Service Worker に 'notificationclick' イベント リスナーを追加する必要があります。このメソッドは、通知がクリックされるたびに呼び出されます。

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

この例では、クリックされた通知に event.notification としてアクセスできます。これにより、通知のプロパティとメソッドにアクセスできます。この場合は、その close() メソッドを呼び出して追加の処理を行います。

操作

アクションを使用すると、通知をクリックするだけの、ユーザーとの新たなインタラクションを作成できます。

ボタン

前のセクションでは、showNotification() を呼び出すときにアクション ボタンを定義する方法について説明しました。

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      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);

ユーザーがアクション ボタンをクリックした場合は、noticationclick イベントの event.action 値を確認して、クリックされたアクション ボタンを特定します。

event.action には、オプションで設定された action 値が含まれます。上記の例では、event.action の値は 'coffee-action'、'doughnut-action'、'gramophone-action'、'atom-action' のいずれかになります。

これにより、次のように通知のクリックやアクションのクリックを検出できます。

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

インライン返信

また、前のセクションでは、通知にインライン返信を追加する方法を確認しました。

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);

event.reply には、ユーザーが入力フィールドに入力した値が含まれます。

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

タグ

tag オプションは、通知を「グループ化」する文字列 ID です。これにより、複数の通知をユーザーにどのように表示するかを簡単に決定できます。例を挙げて説明しますが、

通知を表示し、タグ 'message-group-1' を設定しましょう。次のコードで通知を表示します。

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

最初の通知が表示されます。

メッセージ グループ 1 のタグが付いた最初の通知。

次のように、新しいタグ 'message-group-2' を使用して 2 つ目の通知を表示しましょう。

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

2 つ目の通知がユーザーに表示されます。

メッセージ グループ 2 の 2 番目のタグが 2 つの通知

3 つ目の通知を表示しますが、最初のタグ 'message-group-1' を再利用します。この操作を行うと、最初の通知が閉じて、新しい通知に置き換えられます。

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

これで、showNotification() が 3 回呼び出されたにもかかわらず、2 件の通知が表示されます。

2 つの通知のうち、最初の通知が 3 つ目の通知に置き換えられた通知。

tag オプションは、メッセージをグループ化するための単なる方法です。これにより、新しい通知と同じタグを持つ現在表示されている古い通知は閉じられます。

tag を使用する際の注意点として、通知を置き換える際に音やバイブレーションが発生しません。

そこで役立つのが renotify オプションです。

再通知

これは、執筆時点では主にモバイル デバイスに適用されます。このオプションを設定すると、新しい通知がバイブレーションで通知され、システム音が鳴ります。

サイレント アップデートではなく、置き換え通知でユーザーに通知する必要があるシナリオもあります。チャット アプリケーションはその良い例です。この場合は、tag と renotify を true に設定する必要があります。

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

マナーモード

このオプションを使用すると、新しい通知を表示できますが、デフォルトの動作（バイブレーション、音、デバイスのディスプレイの起動）は行えません。

これは、通知に対してユーザーの早急な対応が不要な場合に最適です。

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

操作が必要

パソコンの Chrome では、通知が一定期間表示されます。Android 版 Chrome にはこの動作はありません。通知は、ユーザーが操作するまで表示されます。

ユーザーが操作するまで通知を表示したままにするには、requireInteraction オプションを追加します。ユーザーが通知を閉じるかクリックするまで、通知が表示されます。

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

このオプションは慎重に使用してください。通知を表示して、ユーザーが行っている操作を中断して通知を閉じるように強制すると、ユーザーの不満を招く可能性があります。

次のセクションでは、通知の管理や、通知がクリックされたときにページを開くなどのアクションの実行にウェブで使用される一般的なパターンをいくつか見ていきます。

次のステップ

Codelab