在日常生活裡，無論是手機還是電腦，我們都依賴 作業系統的通知：不用打開通訊 App，就能知道有人傳訊；不用進購物網站，就能知道包裹正在路上。

現在，透過 Notification API，網頁也能主動把重要訊息推送到使用者眼前，不必等他們回到頁面才發現。

這讓 網頁體驗更像原生 App ── 即使頁面沒開著，網站也能透過 作業系統層級的通知中心 傳遞關鍵訊息，達到主動互動與即時提醒。 📣

權限與體感：為什麼不要一進站就跳？

通知權限對使用者來說是「長期承諾」。一進站就跳，等於把「是否信任你」當成第一印象測驗。這通常會導致大量拒絕，之後就很難再開。正確節奏：

首次造訪（觀望）
   ↓
完成與通知相關的行為（例：開啟「追蹤出貨狀態」）
   ↓
顯示解說小面板（說明為何需要通知，可以隨時關閉）
   ↓
使用者按下「允許」→ 這時才呼叫 requestPermission()

通知權限狀態：default / granted / denied

Notification API 有三種權限狀態：

• default：還沒問過。只有在這狀態下呼叫 Notification.requestPermission() 才會跳請求通知權限對話框。
• granted：使用者允許。可以直接 new Notification() 顯示通知。
• denied：使用者拒絕。之後再呼叫 requestPermission() 不會跳請求通知權限對話框，只能去瀏覽器或系統設定裡重設。

常見疑惑：

• 為什麼我按允許，卻沒跳通知？
  → 可能被 macOS 收進「通知中心」。
  → 或是 系統設定 → 通知 →（你的瀏覽器） 被設為「無」，請改成「橫幅」或「提醒」，並開啟允許。
• 為什麼本機測試沒反應？
  → 必須是 HTTPS 網站 或 localhost，檔案路徑 (file://) 不行。

通知權限狀態流程圖

開始前，先確認瀏覽器支援與通知權限狀態

if (!('Notification' in window)) {
  console.log('❌ 瀏覽器不支援 Notification API');
} else {
  console.log('目前權限：', Notification.permission); // default | granted | denied
}

請求通知權限

async function requestNotifyPermission() {
  if (Notification.permission === 'default') {
    const result = await Notification.requestPermission();
    console.log('使用者選擇：', result);
  }
}

顯示作業系統通知

以下範例會直接顯示 作業系統層級 的通知。若沒看到彈窗：

1. 確認 Notification.permission === 'granted'；
2. 站點為 HTTPS 或 localhost；
3. macOS 可能將訊息收進 通知中心，請至 系統設定 → 通知 →（你的瀏覽器） 開啟允許，顯示樣式選「橫幅」或「提醒」。

new Notification 可用參數

最常見的有：

• body：通知內容文字。
• icon：大圖示，一般放品牌 Logo。
• badge：縮小圖示（部分瀏覽器支援）。
• tag：相同 tag 會互相覆蓋，避免洗版。
• requireInteraction：讓通知常駐，不會自動消失。
• vibrate：手機震動（例如 [200,100,200]）。

if (Notification.permission === 'granted') {
  new Notification('包裹正在路上 🚚', {
  body: '你買的書已經寄出了，明天送達！',
  icon: '/icons/delivery.png',
  badge: '/icons/badge.png',
  tag: 'order-123',
  requireInteraction: true,
});

範例 Demo

這個 Demo 只有最簡單的功能：

1. 點擊按鈕 → 立刻跳出作業系統通知。
2. 或選擇「三秒後通知」→ 有時間先切到別的分頁，體驗背景時仍會收到通知。

• 線上範例網址：Notification

本範例的重點在於：它不是頁面內的狀態，而是直接進入 OS 通知中心。

前景 / 背景 / 關閉 的三種情境

1. 頁面在前景（正在該分頁）
   → 若 document.visibilityState === 'visible'，建議用 Toast / 紅點 Badge，避免干擾。
2. 頁面在背景（分頁還在瀏覽器裡，但目前未被使用者聚焦）
   → 用 Notification API。使用者就算切到其他分頁，也能在 OS 層級 看到通知。
3. 頁面關閉（關閉分頁或瀏覽器）
   → 必須用 Service Worker + Push API。伺服器推送訊息 → SW 收到 → 呼叫 showNotification()。

本篇 Demo 只展示第二種（最簡單的情況）：點擊按鈕或延遲三秒，就會觸發系統通知。

注意事項

1. 明確告知用途：在 UI 上清楚說明通知的目的，並提供「通知設定」入口，讓使用者能隨時關閉。
2. 延後權限請求：等到使用者有明確需求（如追蹤訂單、關注作者）再請求權限，避免一進站就打擾。
3. 合併重複訊息：用 tag 合併同類事件，重要更新時再用 renotify 提醒，避免訊息洗版。
4. 跨平台相容：不是每個瀏覽器都支援所有 Notification 參數（如 actions、requireInteraction、badge），程式需能容忍忽略不支援的欄位。
5. 安全與隱私：僅在 HTTPS 下使用，並綁定使用者手勢觸發，保障安全與體驗。

降級策略：不用通知也能被看見

當 Notification 不支援、權限被拒或平台限制時：

• Toast／Snackbar：以 3–5 秒短訊息告知狀態更新。
• Badge 紅點：在訊息鈴鐺／分頁標籤顯示未讀數。
• 標題閃爍：document.title = '(1) 你有新訊息'（記得適時還原）。
• Email／站內信：對於長週期事件（如報表生成完成）更合適。

延伸閱讀

通常 Notification API 的進階應用會延伸到以下主題：

• Push API 整合：讓伺服器主動推播訊息，需要後端協作、使用者訂閱與金鑰管理。
• 與 Wake Lock / Screen Orientation / Vibration API 搭配：打造更像原生 App 的互動體驗。
• 背景推播通知：如果要做到「頁面關閉時也能收到通知」，就需要結合 Service Worker，讓它在背景中接收推播訊息並協助導頁或彈通知。

👉 歡迎追蹤這個系列，我會從 Canvas 開始，一步步帶你認識更多 Web API 🎯