通知行為

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn
Matt Gaunt
X 首頁

目前為止，我們檢查了可以改變通知外觀的選項。另有 也有選項可改變通知行為。

根據預設，只透過視覺選項呼叫 showNotification() 會有以下結果 行為：

  • 點選通知後不會有任何動作。
  • 每則新通知會逐一顯示。瀏覽器不會收合 通知應用程式
  • 視平台而定，平台可能會為使用者的裝置播放音效或震動。
  • 在某些平台上，通知會在短時間內消失，其他平台則會 除非使用者進行互動，否則一律顯示通知。(例如比較不同通知和 )。

在本節中，我們將說明如何使用選項變更這些預設行為 。這種做法相對較容易導入，且可善用。

通知點擊事件

當使用者點選通知時，預設行為不會受到任何影響。這沒有 甚至關閉通知或關閉通知

通知點擊的常見做法是關閉並執行其他邏輯 (即 開啟視窗或向應用程式發出 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 選項基本上是「groups」的字串 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' 標記，例如：

const title = 'Notification 2 of 3';

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

registration.showNotification(title, options);

這會向使用者顯示第二則通知。

兩則通知顯示訊息群組 2 的第二個標記。

現在我們要顯示第三則通知，但重複使用 '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() 呼叫三次，我們還是有兩則通知。

第 2 則通知，第一則通知會替換成第三則通知。

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 如果有需要 SQL 指令的分析工作負載 則 BigQuery 可能是最佳選擇這個模式會持續顯示通知，直到使用者關閉或點選通知為止。

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

請謹慎使用這個選項。顯示通知並強迫使用者停止執行的操作 他們關閉通知會讓您感到困擾。

在下一節中，我們將探討一些常見的網路活動模式 管理通知與執行各種操作，例如在點擊通知時開啟網頁。

後續步驟

程式碼研究室