本頁面由 Cloud Translation API 翻譯而成。

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

Kate Jeffreys

使用推播通知的好處

通知會向使用者顯示簡短的資訊。網頁應用程式可透過通知，告知使用者重要、具時效性的事件，或是使用者需要採取的行動。

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

以往，網路瀏覽器必須透過提出要求，在伺服器和用戶端之間交換資訊。另一方面，網路推播技術則可讓您設定伺服器，在適合您的應用程式的情況下傳送通知。推送服務會為每個訂閱的服務工作處理程序建立不重複的網址。傳送訊息至 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);
})

使用者與通知互動，如果網頁應用程式尚未啟用，則會將其設為啟用。

後續步驟

接下來，實作推播通知！

我們製作了一系列的程式碼研究室，引導您完成這項程序的每個步驟。