現在,我們介紹了使用者的訂閱流程,並傳送推送訊息。下一步是在使用者的裝置上接收此推送訊息,並顯示通知 (以及其他我們想要執行的作業)。
推送事件
接收訊息後,系統就會在您的服務工作處理程序中分派推送事件。
設定推送事件監聽器的程式碼應與您用 JavaScript 編寫的任何其他事件監聽器類似:
self.addEventListener('push', function(event) {
if (event.data) {
console.log('This push event has data: ', event.data.text());
} else {
console.log('This push event has no data.');
}
});
對大多數服務工作站新手開發人員而言,這段程式碼的最古老是 self
變數。self
經常用於網路工作站,也就是 Service Worker。self
是指全域範圍,就像網頁中的 window
一樣。但如果是網路工作站和 Service Worker,self
指的是 worker 本身。
在上述範例中,self.addEventListener()
可視為為 Service Worker 新增事件監聽器。
在推送事件範例中,我們會檢查是否有任何資料,並將內容輸出至控制台。
您還可以透過其他方式剖析推送事件的資料:
// Returns string
event.data.text()
// Parses data as JSON string and returns an Object
event.data.json()
// Returns blob of data
event.data.blob()
// Returns an arrayBuffer
event.data.arrayBuffer()
大部分人會使用 json()
或 text()
,取決於他們希望應用程式得到的內容。
本範例說明如何新增推送事件監聽器,以及如何存取資料,但缺少兩項功能。未顯示通知,也沒有使用 event.waitUntil()
。
等待時間:
需要瞭解的其中一個事項是,您無法控制服務工作站程式碼何時執行。瀏覽器會判斷喚醒時間和終止時間的時間。您可以藉由將承諾傳遞至 event.waitUntil()
方法,讓瀏覽器知道「嘿,我很忙,忙著處理重要工作」。如此一來,瀏覽器就會讓 Service Worker 持續運作,直到您傳入的承諾會維持不變為止。
使用推送事件時,您必須另外顯示通知,才能保證傳入的 promise。
以下是顯示通知的基本範例:
self.addEventListener('push', function(event) {
const promiseChain = self.registration.showNotification('Hello, World.');
event.waitUntil(promiseChain);
});
呼叫 self.registration.showNotification()
的方法可向使用者顯示通知,並會傳回承諾在顯示通知後立即解決的問題。
為了讓這個範例盡可能清楚明瞭,我已經將這個承諾項目指派給名為 promiseChain
的變數。這會傳遞至 event.waitUntil()
。我知道這部分非常冗長,但我發現許多問題因為誤解了應傳遞至 waitUntil()
中,或是因為已毀損的 Proto 鏈而造成的。
這類範例比較複雜,像是提出資料網路要求,以及利用數據分析追蹤推送事件,如下所示:
self.addEventListener('push', function(event) {
const analyticsPromise = pushReceivedTracking();
const pushInfoPromise = fetch('/api/get-more-data')
.then(function(response) {
return response.json();
})
.then(function(response) {
const title = response.data.userName + ' says...';
const message = response.data.message;
return self.registration.showNotification(title, {
body: message
});
});
const promiseChain = Promise.all([
analyticsPromise,
pushInfoPromise
]);
event.waitUntil(promiseChain);
});
我們在此呼叫一個傳回承諾 pushReceivedTracking()
的函式,為了達到這個範例,可以假定會向我們的分析供應商發出網路要求。我們也會發出網路要求,取得回應,並使用通知標題與訊息的回應資料來顯示通知。
我們可以結合這些承諾與 Promise.all()
,確保服務工作站在執行這兩項工作時保持運作。結果保證會傳遞至 event.waitUntil()
,這表示瀏覽器會等到兩次承諾都完成後,才會檢查通知是否已顯示,並終止 Service Worker。
我們應該要重視 waitUntil()
和使用方式,因為開發人員最常遇到的其中一個問題是,入侵鏈結不正確 / 無效時,Chrome 會顯示這則「預設」通知:
Chrome 只會顯示「這個網站已在背景更新過」通知。當收到推送訊息時,服務工作處理程序中的推送事件也不會在承諾傳遞至 event.waitUntil()
時顯示通知。
開發人員被發現,主要是因為他們的程式碼通常會呼叫 self.registration.showNotification()
,但「並未」執行任何承諾傳回時的行為。這會間歇性導致顯示預設通知。舉例來說,我們可以移除上例中 self.registration.showNotification()
的傳回,而收到這則通知的風險。
self.addEventListener('push', function(event) {
const analyticsPromise = pushReceivedTracking();
const pushInfoPromise = fetch('/api/get-more-data')
.then(function(response) {
return response.json();
})
.then(function(response) {
const title = response.data.userName + ' says...';
const message = response.data.message;
self.registration.showNotification(title, {
body: message
});
});
const promiseChain = Promise.all([
analyticsPromise,
pushInfoPromise
]);
event.waitUntil(promiseChain);
});
看看它有多容易錯過的事物。
提醒您,如果看到這則通知,請查看承諾鏈和 event.waitUntil()
。
在下一節中,我們將探討如何為通知設定樣式,以及可以顯示的內容。