我們將探討幾種常見的網路推播實作模式。
這會涉及使用服務工作者中提供的幾個不同 API。
通知關閉事件
在上一節中,我們瞭解了如何監聽 notificationclick
事件。
如果使用者關閉其中一個通知 (即使用者按下 X 或滑動關閉通知,而非點選通知),系統也會呼叫 notificationclose
事件。
這個事件通常用於追蹤使用者與通知的互動情形。
self.addEventListener('notificationclose', function (event) {
const dismissedNotification = event.notification;
const promiseChain = notificationCloseAnalytics();
event.waitUntil(promiseChain);
});
在通知中新增資料
收到推播訊息時,通常只有在使用者點按通知時,資料才有用。例如,點按通知時應開啟的網址。
如要從推播事件取得資料並附加至通知,最簡單的方法是在傳遞至 showNotification()
的選項物件中新增 data
參數,如下所示:
const options = {
body:
'This notification has data attached to it that is printed ' +
"to the console when it's clicked.",
tag: 'data-notification',
data: {
time: new Date(Date.now()).toString(),
message: 'Hello, World!',
},
};
registration.showNotification('Notification with Data', options);
在點擊處理常式中,您可以使用 event.notification.data
存取資料。
const notificationData = event.notification.data;
console.log('');
console.log('The notification data has the following parameters:');
Object.keys(notificationData).forEach((key) => {
console.log(` ${key}: ${notificationData[key]}`);
});
console.log('');
開啟視窗
對通知最常見的回應之一,就是開啟特定網址的視窗 / 分頁。我們可以使用 clients.openWindow()
API 執行這項操作。
在 notificationclick
事件中,我們會執行以下程式碼:
const examplePage = '/demos/notification-examples/example-page.html';
const promiseChain = clients.openWindow(examplePage);
event.waitUntil(promiseChain);
在下一節中,我們將探討如何檢查我們要將使用者導向的網頁是否已開啟。這樣一來,我們就能專注於已開啟的分頁,而非開啟新分頁。
將焦點移至現有視窗
在可行的情況下,我們應將焦點放在視窗上,而非每次使用者點選通知時就開啟新視窗。
在我們說明如何達成這項目標之前,請注意,只有原始網頁上的網頁才能執行這項操作。這是因為我們只能看到屬於我們網站的網頁。這可避免開發人員看到使用者瀏覽的所有網站。
以先前的範例為例,我們將修改程式碼,看看 /demos/notification-examples/example-page.html
是否已開啟。
const urlToOpen = new URL(examplePage, self.location.origin).href;
const promiseChain = clients
.matchAll({
type: 'window',
includeUncontrolled: true,
})
.then((windowClients) => {
let matchingClient = null;
for (let i = 0; i < windowClients.length; i++) {
const windowClient = windowClients[i];
if (windowClient.url === urlToOpen) {
matchingClient = windowClient;
break;
}
}
if (matchingClient) {
return matchingClient.focus();
} else {
return clients.openWindow(urlToOpen);
}
});
event.waitUntil(promiseChain);
讓我們逐步完成程式碼。
首先,我們會使用 URL API 剖析範例頁面。這是我從 Jeff Posnick 那邊學到的實用技巧。如果傳入的字串為相對網址 (即 /
會變成 https://example.com/
),使用 location
物件呼叫 new URL()
會傳回絕對網址。
我們會將網址設為絕對網址,以便日後比對視窗網址。
const urlToOpen = new URL(examplePage, self.location.origin).href;
接著,我們會取得 WindowClient
物件的清單,也就是目前開啟的分頁和視窗清單。(請注意,這些分頁僅供原始網址使用)。
const promiseChain = clients.matchAll({
type: 'window',
includeUncontrolled: true,
});
傳遞至 matchAll
的選項會通知瀏覽器,我們只想搜尋「window」類型的用戶端 (也就是只搜尋分頁和視窗,並排除網路工作者)。includeUncontrolled
可讓我們搜尋來源中所有未受目前服務工作站 (即執行此程式碼的服務工作站) 控制的分頁。一般來說,呼叫 matchAll()
時,您一律希望 includeUncontrolled
為 true。
我們會將傳回的承諾擷取為 promiseChain
,以便稍後將其傳遞至 event.waitUntil()
,讓服務工作者保持運作。
當 matchAll()
應許解析時,我們會逐一檢查傳回的視窗用戶端,並將其網址與要開啟的網址進行比較。如果找到相符項目,我們會將焦點放在該用戶端,讓使用者注意到該視窗。您可以使用 matchingClient.focus()
呼叫完成聚焦。
如果找不到相符的用戶端,我們會開啟新視窗,與前一個部分相同。
.then((windowClients) => {
let matchingClient = null;
for (let i = 0; i < windowClients.length; i++) {
const windowClient = windowClients[i];
if (windowClient.url === urlToOpen) {
matchingClient = windowClient;
break;
}
}
if (matchingClient) {
return matchingClient.focus();
} else {
return clients.openWindow(urlToOpen);
}
});
合併通知
我們發現,在通知中加入標籤會啟用某種行為,也就是會取代所有具有相同標籤的現有通知。
不過,您可以使用 Notifications API 更精細地折疊通知。以即時通訊應用程式為例,開發人員可能希望新通知顯示類似「您有兩則來自 Matt 的訊息」的訊息,而非只顯示最新訊息。
您可以使用 registration.getNotifications() API 執行這項操作,或以其他方式操控目前的通知,這個 API 可讓您存取網頁應用程式目前顯示的所有通知。
我們來看看如何使用這個 API 實作即時通訊範例。
在我們的即時通訊應用程式中,假設每則通知都包含使用者名稱等資料。
我們首先要做的是,找出使用者在特定使用者名稱下有任何未讀通知。我們會取得 registration.getNotifications()
並迴圈處理,然後檢查 notification.data
是否有特定使用者名稱:
const promiseChain = registration.getNotifications().then((notifications) => {
let currentNotification;
for (let i = 0; i < notifications.length; i++) {
if (notifications[i].data && notifications[i].data.userName === userName) {
currentNotification = notifications[i];
}
}
return currentNotification;
});
下一個步驟是將這則通知替換為新通知。
在這個假訊息應用程式中,我們會在新的通知資料中新增計數,並在收到每則新通知時遞增計數,以追蹤新訊息的數量。
.then((currentNotification) => {
let notificationTitle;
const options = {
icon: userIcon,
}
if (currentNotification) {
// We have an open notification, let's do something with it.
const messageCount = currentNotification.data.newMessageCount + 1;
options.body = `You have ${messageCount} new messages from ${userName}.`;
options.data = {
userName: userName,
newMessageCount: messageCount
};
notificationTitle = `New Messages from ${userName}`;
// Remember to close the old notification.
currentNotification.close();
} else {
options.body = `"${userMessage}"`;
options.data = {
userName: userName,
newMessageCount: 1
};
notificationTitle = `New Message from ${userName}`;
}
return registration.showNotification(
notificationTitle,
options
);
});
如果目前顯示通知,我們會增加訊息計數,並據此設定通知標題和內文訊息。如果沒有通知,我們會建立新的通知,並將 newMessageCount
設為 1。
結果如下所示:
第二則通知會將通知摺疊成以下內容:
這種做法的好處是,如果使用者看到通知一一顯示,比起只用最新訊息取代通知,會讓畫面看起來更協調。
規則的例外狀況
我一直表示,您必須在收到推播時顯示通知,而且這在大多數情況下都是正確的。使用者已開啟並專注於您的網站時,您就不需要顯示通知。
在推播事件中,您可以檢查視窗用戶端並尋找已聚焦的視窗,藉此確認是否需要顯示通知。
取得所有視窗並尋找聚焦視窗的程式碼如下所示:
function isClientFocused() {
return clients
.matchAll({
type: 'window',
includeUncontrolled: true,
})
.then((windowClients) => {
let clientIsFocused = false;
for (let i = 0; i < windowClients.length; i++) {
const windowClient = windowClients[i];
if (windowClient.focused) {
clientIsFocused = true;
break;
}
}
return clientIsFocused;
});
}
我們使用 clients.matchAll()
取得所有視窗用戶端,然後循環檢查 focused
參數。
在推播事件中,我們會使用這個函式決定是否需要顯示通知:
const promiseChain = isClientFocused().then((clientIsFocused) => {
if (clientIsFocused) {
console.log("Don't need to show a notification.");
return;
}
// Client isn't focused, we need to show a notification.
return self.registration.showNotification('Had to show a notification.');
});
event.waitUntil(promiseChain);
透過推播事件傳送訊息給網頁
我們發現,如果使用者目前位於您的網站,您可以略過顯示通知。不過,如果您仍想讓使用者知道事件已發生,但通知太過強硬,該怎麼辦呢?
其中一種方法是從服務工作者傳送訊息至網頁,這樣網頁就能向使用者顯示通知或更新,告知他們事件發生的時間。在網頁中顯示較不顯眼的通知,對使用者來說會更友善,這時就很適合使用這項功能。
假設我們收到推播,並確認目前已將焦點放在網頁應用程式上,就可以向每個已開啟的網頁「發布訊息」,如下所示:
const promiseChain = isClientFocused().then((clientIsFocused) => {
if (clientIsFocused) {
windowClients.forEach((windowClient) => {
windowClient.postMessage({
message: 'Received a push message.',
time: new Date().toString(),
});
});
} else {
return self.registration.showNotification('No focused windows', {
body: 'Had to show a notification instead of messaging each page.',
});
}
});
event.waitUntil(promiseChain);
在每個頁面中,我們會透過新增訊息事件監聽器來監聽訊息:
navigator.serviceWorker.addEventListener('message', function (event) {
console.log('Received a message from service worker: ', event.data);
});
您可以在這個訊息事件監聽器中執行任何操作,例如在頁面上顯示自訂 UI,或完全忽略訊息。
另外值得注意的是,如果您未在網頁中定義訊息事件監聽器,服務工作員傳送的訊息就不會執行任何操作。
快取網頁並開啟視窗
雖然這不在本指南的範圍內,但值得討論的一種情況是,您可以透過快取使用者點按通知後會造訪的網頁,改善網頁應用程式的整體使用者體驗。
這需要服務工作者設定來處理 fetch
事件,但如果您實作 fetch
事件事件監聽器,請務必在顯示通知前先快取所需的網頁和素材資源,以便在 push
事件中充分利用該監聽器。
瀏覽器相容性
notificationclose
事件
Clients.openWindow()
ServiceWorkerRegistration.getNotifications()
clients.matchAll()
如需更多資訊,請參閱這篇服務工作者文章簡介。
後續步驟
- 網路推播通知總覽
- 推播通知的運作方式
- 訂閱使用者
- 權限使用者體驗
- 使用網路推送程式庫傳送訊息
- Web Push 通訊協定
- 處理推播事件
- 顯示通知
- 通知行為
- 常見的通知模式
- 推播通知常見問題
- 常見問題和回報錯誤