使用推播通知的好處
通知會向使用者顯示簡短的資訊。網頁應用程式可透過通知,告知使用者重要、具時效性的事件,或是使用者需要採取的行動。
通知的外觀與風格會因平台而異。例如:
以往,網路瀏覽器必須透過提出要求,在伺服器和用戶端之間交換資訊。另一方面,網路推播技術則可讓您設定伺服器,在適合您的應用程式的情況下傳送通知。推送服務會為每個訂閱的服務工作處理程序建立不重複的網址。傳送訊息至 Service Worker 的網址會引發該 Service Worker 的事件,提示系統顯示通知。
推播通知可提示使用者重新開啟應用程式,並根據最新資訊發揮應用程式的最大效用。
建立及傳送通知
使用 Notifications 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,並訂閱推播通知。隨後,伺服器會傳送通知至訂閱端點。
用戶端和服務工作人員使用基本 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();
如要啟用推播通知,服務工作處理程序會使用
PushManager.subscribe()
建立推送訂閱項目。在呼叫PushManager.subscribe()
時,服務工作站會提供應用程式的 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); })
使用者與通知互動,如果網頁應用程式尚未啟用,則會將其設為啟用。
後續步驟
接下來,實作推播通知!
我們製作了一系列的程式碼研究室,引導您完成這項程序的每個步驟。