使用推播通知吸引使用者或再次與他們互動

Kate Jeffreys
Kate Jeffreys

通知會向使用者顯示一小部分的資訊。網頁應用程式可透過通知向使用者說明具時效性的重大活動,或要求使用者採取的行動。

通知的外觀與風格會因平台而異。例如:

Android 裝置上的通知。
,瞭解如何調查及移除這項存取權。
MacBook 上的通知。

一般來說,網路瀏覽器必須透過提出要求,才能在伺服器和用戶端之間交換資訊。另一方面,網路推播技術則可讓您設定伺服器,在有對應用程式的情況下傳送通知。推送服務會為每個訂閱的 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 並訂閱推送

  1. 用戶端應用程式向 ServiceWorkerContainer.register() 註冊 Service Worker。當用戶端處於閒置狀態時,已註冊的 Service Worker 會繼續在背景中執行。

    客戶代碼:

    navigator.serviceWorker.register('sw.js');
  2. 用戶端向使用者要求傳送通知的權限。

    客戶代碼:

    Notification.requestPermission();
  3. 如要啟用推播通知,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 的專屬網址。這個網址稱為「訂閱端點」

  4. 用戶端將訂閱端點傳送至應用程式伺服器。

    客戶代碼:

    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 部分:傳送通知

  1. 網路伺服器會將通知傳送至訂閱端點。

    伺服器代碼:

    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);
  2. 傳送至訂閱端點的通知會以 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);
    })
  3. 使用者與通知互動,將網頁應用程式設為啟用 (如果尚未啟用)。

後續步驟

接著,請實作推播通知!

我們製作了一系列程式碼研究室,協助您逐步完成整個程序。