到目前為止，我們探討了各種會影響通知視覺外觀的選項。此外，還有其他選項可以修改通知的行為。
根據預設，如果僅使用視覺化選項呼叫 showNotification()，會有下列行為：
- 按一下通知則不會執行任何動作。
- 每則新通知會依序顯示。瀏覽器不會以任何方式收合通知。
- 平台可能會播放音效或震動使用者的裝置 (視平台而定)。
- 在某些平台上，通知會在一小段時間後消失，而其他平台則會在使用者未互動時顯示通知。(例如比較 Android 和電腦上的通知)。
在本節中，我們將探討如何單獨使用選項變更這些預設行為。這種解決方案相對簡單，易於導入且善加利用。
通知點擊事件
當使用者點選通知時，預設的行為並無任何改變。也不會關閉或移除通知
常見的做法是關閉通知，並執行其他邏輯 (例如開啟視窗或向應用程式發出某些 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' 新標記，例如：
const title = 'Notification 2 of 3';
const options = {
body: "With 'tag' of 'message-group-2'",
tag: 'message-group-2',
};
registration.showNotification(title, options);
並向使用者顯示第二次通知。
現在，讓我們顯示第三則通知，但重複使用 '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()，但仍有兩則通知。
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);
請謹慎使用這個選項。顯示通知並強迫使用者停止操作來關閉通知可能會令人感到困擾，
在下一節中，我們將探討網路上一些常用的通知管理模式，以及在按下通知時開啟網頁等動作。