為什麼要使用推播通知?
通知會向使用者顯示一小部分的資訊。網頁應用程式可透過通知向使用者說明具時效性的重大活動,或要求使用者採取的行動。
通知的外觀與風格會因平台而異。例如:
,瞭解如何調查及移除這項存取權。一般來說,網路瀏覽器必須透過提出要求,才能在伺服器和用戶端之間交換資訊。另一方面,網路推播技術則可讓您設定伺服器,在有對應用程式的情況下傳送通知。推送服務會為每個訂閱的 Service Worker 建立專屬網址。傳送訊息至 Service Worker 的網址時,系統會在該 Service Worker 上引發事件,提示其顯示通知。
推播通知可提示使用者重新開啟應用程式,並根據最新資訊使用應用程式。
建立及傳送通知
使用 Notification API 建立通知。Notification
物件包含 title
字串和 options
物件。例如:
let title = 'Hi!';
let options = {
body: 'Very Important Message',
/* other options can go here */
};
let notification = new Notification(title, options);
通知啟用時,title
會以粗體顯示,body
則包含其他文字。
取得傳送通知的權限
如要顯示通知,應用程式必須要求使用者授予相關權限:
Notification.requestPermission();
推播通知的運作方式
通知真正的威力來自服務工作人員和推送技術:
即使應用程式未顯示在畫面中,Service Worker 還是可以在背景執行並顯示通知。
推送技術可讓您設定伺服器,在對您的應用程式有意義的情況下傳送通知。推送服務會為每個訂閱的 Service Worker 建立專屬網址。傳送訊息至 Service Worker 的網址時,系統會在該 Service Worker 上引發事件,提示其顯示通知。
在下方的範例流程中,用戶端會註冊 Service Worker 並訂閱推播通知。然後,伺服器會向訂閱端點傳送通知。
用戶端和服務工作站會使用基本 JavaScript,而不使用額外程式庫。該伺服器是以 Node.js 上的 express
npm 套件建構而成,並使用 web-push
npm 套件傳送通知。為了傳送資訊至伺服器,用戶端會呼叫伺服器已公開的 POST 網址。
第 1 部分:註冊 Service Worker 並訂閱推送
用戶端應用程式向
ServiceWorkerContainer.register()
註冊 Service Worker。當用戶端處於閒置狀態時,已註冊的 Service Worker 會繼續在背景中執行。客戶代碼:
navigator.serviceWorker.register('sw.js');
用戶端向使用者要求傳送通知的權限。
客戶代碼:
Notification.requestPermission();
如要啟用推播通知,Service Worker 會使用
PushManager.subscribe()
建立推送訂閱項目。在呼叫PushManager.subscribe()
中,Service Worker 會提供應用程式的 API 金鑰做為 ID。客戶代碼:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ });
});Firebase 雲端通訊等推送服務會在訂閱模式上運作。當 Service Worker 呼叫
PushManager.subscribe()
以訂閱推送服務時,推送服務會建立該 Service Worker 的專屬網址。這個網址稱為「訂閱端點」。用戶端將訂閱端點傳送至應用程式伺服器。
客戶代碼:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
sendToServer(subscription, '/new-subscription', 'POST');
});
});伺服器代碼:
app.post('/new-subscription', (request, response) => {
// extract subscription from request
// send 'OK' response
});
第 2 部分:傳送通知
網路伺服器會將通知傳送至訂閱端點。
伺服器代碼:
const webpush = require('web-push');
let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };
webpush.sendNotification(subscription, payload, options);傳送至訂閱端點的通知會以 Service Worker 做為目標,觸發推送事件。Service Worker 會接收訊息,並以通知的形式向使用者顯示。
Service Worker 程式碼:
self.addEventListener('push', (event) => {
let title = { /* get notification title from event data */ }
let options = { /* get notification options from event data */ }
showNotification(title, options);
})使用者與通知互動,將網頁應用程式設為啟用 (如果尚未啟用)。
後續步驟
接著,請實作推播通知!
我們製作了一系列程式碼研究室,協助您逐步完成整個程序。