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

Kate Jeffreys
Kate Jeffreys

通知會向使用者顯示小型資訊。網頁應用程式可以使用通知,向使用者告知重要且具時效性的事件,或使用者需要採取的動作。

不同平台的通知外觀和風格各有不同。例如:

Android 裝置上的通知。
MacBook 上的通知。

傳統上,網路瀏覽器必須透過提出要求,才能在伺服器和用戶端之間啟動資訊交換。另一方面,網路推播技術可讓您設定伺服器,在適合應用程式時傳送通知。推播服務會為每個訂閱的服務工作站建立專屬網址。將訊息傳送至服務工作站的網址,會在該服務工作站上觸發事件,促使服務工作站顯示通知。

推播通知可提醒使用者重新開啟應用程式,並根據最新資訊使用應用程式,協助他們充分運用應用程式。

建立及傳送通知

使用 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 可在背景執行,並在應用程式未顯示在畫面上時顯示通知。

  • 您可以使用推播技術設定伺服器,在適合應用程式的情況下傳送通知。推播服務會為每個已訂閱的服務工作程建立專屬網址。將訊息傳送至服務工作站的網址,會在該服務工作站上觸發事件,促使服務工作站顯示通知。

在以下範例流程中,用戶端會註冊服務工作者,並訂閱推播通知。接著,伺服器會傳送通知至訂閱端點。

用戶端和服務工作者會使用原始 JavaScript,不含額外程式庫。此伺服器是使用 Node.js 上的 express npm 套件建構,並使用 web-push npm 套件傳送通知。如要將資訊傳送至伺服器,用戶端會呼叫伺服器公開的 POST 網址。

第 1 部分:註冊 Service Worker 並訂閱推播

  1. 用戶端應用程式會將 Service Worker 註冊至 ServiceWorkerContainer.register()。在用戶端未啟用時,已註冊的 Service Worker 會繼續在背景執行。

    用戶端程式碼:

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

    用戶端程式碼:

    Notification.requestPermission();
  3. 如要啟用推播通知,服務工作站會使用 PushManager.subscribe() 建立推播訂閱項目。在對 PushManager.subscribe() 的呼叫中,服務工作站會提供應用程式的 API 金鑰做為 ID。

    用戶端程式碼:

    navigator.serviceWorker.register('sw.js').then(sw => {
      sw
    .pushManager.subscribe({ /* API key */ });
    });

    Firebase 雲端通訊等推播服務採用訂閱模式運作。當服務工作者透過呼叫 PushManager.subscribe() 訂閱推播服務時,推播服務會建立該服務工作者專屬的網址。這個網址稱為訂閱端點

  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 程式碼:

    self.addEventListener('push', (event) => {
      let title
    = { /* get notification title from event data */ }
      let options
    = { /* get notification options from event data */ }
      showNotification
    (title, options);
    })
  3. 使用者與通知互動,讓網路應用程式處於啟用狀態 (如果尚未啟用)。

後續步驟

接下來,請實作推播通知!

我們製作了一系列 Codelab,逐步說明整個程序。