PWA Web Notifications 通知 實作權限請求與消息提示機制提升用戶回訪率

什麼是 Web Notifications API？

Web Notifications API 是一種允許網頁應用程式（特別是 PWA）向使用者發送系統級通知的技術。無論使用者當前是否正在瀏覽該網站，只要瀏覽器仍在執行（且已註冊 Service Worker），通知就能以彈窗的形式出現在電腦桌面或行動裝置的通知列中。這項 API 的核心在於 Notification 物件，它支援豐富的視覺配置（如標題、內容摘要、圖示與震動模式），並嚴格遵循「權限請求」機制，確保只有在使用者明確同意的前提下才能發送。它是提升 PWA 用戶回訪率與即時互動性的關鍵技術。

什麼是 Web Notifications API?

透過 Web Notifications API 可以讓 Progressive Web App 發出系統層級的通知，搭配 service worker 背景執行的特性，就可以做到 App 的背景推播通知。

下一篇文章小編會完整開箱怎麼實作前後端的網站推播通知。

底下連結提供基本的推播示範:
https://linyencheng-push-notification.herokuapp.com/

怎麼使用 Web Notifications API?

首先網頁須被配置在 https 的環境下，當瀏覽器透過 API 操作到網頁本身以外的東西都需要權限，像是位置、鏡頭、麥克風、系統通知等都是。

原則上也是只要 Notification 有存在就可以要求權限並使用，另外透過 Notification.permission 可以查看目前狀態，要求權限的程式碼如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

if ("Notification" in window) {
  Notification.requestPermission().then(function (result) {
    console.log(result);
  });
}

// 也可以寫成函式
function checkNotificationPromise() {
  try {
    Notification.requestPermission().then();
  } catch (e) {
    return false;
  }

  return true;
}

在已安裝的 App 中可以透過 manifest 檔案來直接增加配置，也可以開啟相關權限:

1
2
3
4
5
6
7

{
  "permissions": {
    "desktop-notification": {
      "description": "Allows to display notifications on the user's desktop."
    }
  }
}

要求通知權限 (圖片來源: https://blog.chromium.org/)

使用上也沒有太過複雜，就是 new 一個 Notification 就完成了。

1
2
3
4
5

const n = new Notification("哈囉!");
const notification = new Notification("複雜一點", {
  body: "描述",
  icon: "/icon.png",
});

Notifications API 參數

視覺設計上主要有以下幾種參數，直接參考圖片:

通知視覺參數對照 (圖片來源: https://developers.google.com)

1
2
3
4
5
6
7
8
9

{
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>"
}

如果還是沒什麼感覺，底下有大大製作的產生器，直接試玩最快:
https://tests.peter.sh/notification-generator/

Notification Triggers

雖然目前已經有了通知的 API 但對於以時間 (time-based) 為觸發條件的事件相對還沒有那麼方便，Notification trigger 就是為了解決這個問題而出現的 API，未來也可能會有以地點為條件的觸發 API。

目前這個 API 還是實驗性的功能，需要自行從 Chrome about://flags 中開啟權限，將 #enable-experimental-web-platform-features 開啟。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

if ("showTrigger" in Notification.prototype) {
  // 開啟後有存在就可以使用囉
  // 註冊
  registration.showNotification(
    `Triggered for ${new Date(Date.now() + sec * 1000).toLocaleTimeString()}`,
    {
      tag: Math.random().toString().substr(2),
      body: `Scheduled at ${new Date().toLocaleTimeString()}.`,
      showTrigger: new TimestampTrigger(Date.now() + sec * 1000),
      icon: icon,
    }
  );

  const registration = await navigator.serviceWorker.getRegistration();
  const notifications = await registration.getNotifications({
    includeTriggered: true,
  });
  // 關閉全部
  notifications.forEach((notification) => notification.close());
}

教學文件中 Demo 的站台: https://notification-triggers.glitch.me/

Permission UX

一個好的時機是在用戶完成關鍵行為或轉換後才進行提示，或是透過勾選的選項來觸發。

1. 在用戶完成關鍵行為或轉換後才透過提示手動觸發 (圖片來源: https://developers.google.com)

   

2. 透過選項讓用戶手動觸發 (圖片來源: https://developers.google.com)

   
   

FAQ：Web Notifications 常見問題

Q1：如果使用者點擊了「封鎖」，我還能再跳出權限請求嗎？

A：不能。 一旦權限被拒絕（denied），程式碼將無法再次觸發系統請求視窗。您必須引導使用者手動點擊瀏覽器網址列旁的「鎖頭」圖示，並將「通知」改為「允許」。這也是為什麼建議不要在進入網站的第一秒就請求權限。

Q2：Notification 與 registration.showNotification 有什麼差別？

A：new Notification() 是在網頁前景直接顯示通知，當分頁關閉後就無法運作。而 registration.showNotification() 則是透過 Service Worker 發送，即使使用者關閉了分頁，只要背景進程還在，通知就能成功彈出。

Q3：為什麼我的通知圖示 (icon) 顯示不出來？

A：請確保圖示的路徑是「絕對路徑」或是相對於 Service Worker 的正確路徑。此外，部分作業系統對圖示格式（建議使用 PNG）與透明度有特定要求，若圖片損毀或無法存取，系統會顯示預設的瀏覽器圖示。

• ← 上一篇
• 下一篇 →