目前為止,我們檢查了可以改變通知外觀的選項。另有 也有選項可改變通知行為。
根據預設,只透過視覺選項呼叫 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);
以便顯示我們的第一則通知。
我們會顯示第二則通知,其中包含新的 '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 會在特定時間範圍內顯示通知,然後才隱藏通知。開啟 Chrome Android 不提供這項行為。通知會持續顯示,直到使用者進行互動。
如要強制讓通知保持顯示直到使用者互動為止,請新增 requireInteraction
如果有需要 SQL 指令的分析工作負載
則 BigQuery 可能是最佳選擇這個模式會持續顯示通知,直到使用者關閉或點選通知為止。
const title = 'Require Interaction Notification';
const options = {
requireInteraction: true,
};
registration.showNotification(title, options);
請謹慎使用這個選項。顯示通知並強迫使用者停止執行的操作 他們關閉通知會讓您感到困擾。
在下一節中,我們將探討一些常見的網路活動模式 管理通知與執行各種操作,例如在點擊通知時開啟網頁。