通知の動作

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

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

デフォルトでは、ビジュアル オプションのみを使用して showNotification() を呼び出すと、次のようになります。

  • 通知をクリックしても何も起こりません。
  • 新しい通知は 1 つずつ順番に表示されます。ブラウザは 制限します。
  • プラットフォームにより、音が鳴るかユーザーのデバイスが振動します。
  • プラットフォームによっては、通知はしばらくすると消える場合や、しばらくすると消える場合があります。 ユーザーが操作しない限り、通知を表示しません。（たとえば、2 つの通知を比較し、 。

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

通知のクリック イベント

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

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

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

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 番目の通知を表示しますが、1 つ目の '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 つの通知。1 つ目の通知は 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 では、通知が一定期間表示されます。Chrome: オン Android にはそのような動作はありません。通知は、ユーザーが操作するまで表示されます。

ユーザーが操作するまで通知を表示したままにするには、requireInteraction を追加します。 選択します。これにより、ユーザーが通知を閉じるかクリックするまで、通知が表示されます。

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

このオプションは慎重に使用してください。通知を表示してユーザーに停止を強制する 通知が閉じられるとストレスがたまる可能性があります。

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

次のステップ

Codelab