什麼是網站推播通知

推播通知不管對 App 或是網站來說都是一種重新吸引用戶來使用 App 的方法，所以目標是即使網站、App 關閉時也要能在背景接收推播。推播的目的是為了增加 engagement，在行銷領域中 engagement 這個常見的指標就是指用戶在網站或 APP 上的互動程度或者參與度。

網頁推播通知用戶端怎麼去實作

後端可以選擇自己實作也可以直接串接使用現有的服務，程式撰寫上相關操作的 JavaScript API 也相對簡單，接下來就來一步步完成最基本的推播吧。

1. 檢查支援度，然後針對支援的部分做漸進式增強

• serviceWorker: 背景也要可以收資料
• PushManager: 串接推播

if (!("serviceWorker" in navigator)) {
  // Service Worker 不支援
  return;
}

if (!("PushManager" in window)) {
  // Push API 不支援
  return;
}

2. 請求權限，瀏覽器需要允許推播通知

function askPermission() {
  return new Promise(function (resolve, reject) {
    const permissionResult = Notification.requestPermission(function (result) {
      resolve(result);
    });

    if (permissionResult) {
      permissionResult.then(resolve, reject);
    }
  }).then(function (permissionResult) {
    if (permissionResult !== "granted") {
      throw new Error("We weren't granted permission.");
    }
  });
}

3. 註冊 serviceWorker: 相關處理會寫在這邊
4. 使用 PushManager 訂閱推播: 其中的參數 userVisibleOnly 目前 Chrome 只支援每次收到推送時顯示通知，這代表沒有辦法在背景偷偷做事情，applicationServerKey 則是會用到後端給的 Public Vapid Key，產生出來的 subscription 可以看成是 client 端的 ID。
5. 向 Sever 發送訂閱: 把剛剛產生的 subscription 傳送到後端

if ("serviceWorker" in navigator) {
  // 3. 註冊 serviceWorker
  const register = await navigator.serviceWorker.register("/sw.js", {
    scope: "/",
  });

  // 4. 使用 PushManager 訂閱推播
  const subscription = await register.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicVapidKey),
  });

  // 5. 向 Sever 發送訂閱
  await fetch("/subscribe", {
    method: "POST",
    body: JSON.stringify(subscription),
    headers: {
      "Content-Type": "application/json",
    },
  });
}

6. 在 serviceWorker 中依照資料格式處理 push 事件，這裡的例子為顯示通知

• 字串: event.data.text()
• JSON: event.data.json()
• blob: event.data.blob()
• arrayBuffer: event.data.arrayBuffer()

7. 透過 event.waitUntil() 等待通知執行完成

self.addEventListener("push", (event) => {
  const data = event.data.json();

  const promiseChain = self.registration.showNotification(data.title, {
    body: "Yay it works!",
  });

  event.waitUntil(promiseChain);
});

這次的 Demo 連結如下也歡迎各位大大試玩看看:
https://linyencheng-push-notification.herokuapp.com/