HTML5 桌面通知：Chrome/IE/Edge/Firefox 皆支援，非 Chrome 專屬

基本用法

// 1. 請求權限（通常在用戶互動中觸發，如點擊按鈕）
function requestNotifyPermission() {
    if (!('Notification' in window)) {
        alert('瀏覽器不支援桌面通知');
        return;
    }
    Notification.requestPermission().then(permission => {
        if (permission === 'granted') console.log('授權成功');
    });
}

// 2. 發送通知
function showNotification(title, body, icon) {
    if (Notification.permission === 'granted') {
        new Notification(title, { body, icon, tag: 'unique-tag' });
    }
}

IE/舊版瀏覽器替代方案

• IE 不支援 Notification API，無法透過標準方式實現。
• 舊專案若必須支援 IE，可用 **輪詢 + 頁面內彈窗 (模態框/Toast)** 模擬通知體驗。
• 或引入 **SignalR / WebSocket + 自訂 UI** 實現即時推送提醒，不依賴系統通知。

進階：Service Worker + Push API（離線/後台推送）

若需**瀏覽器關閉/頁面未開啟**也能收到推送，需實作：

1. 註冊 Service Worker (`navigator.serviceWorker.register('/sw.js')`)。
2. 向 Push 服務訂閱 (`pushManager.subscribe()`)，獲取 `endpoint`、`keys` 送後端。
3. 後端用 Web Push 協定 (VAPID) 加密發送給瀏覽器 Push 服務。
4. SW 中 `self.addEventListener('push', e => { self.registration.showNotification(...) })`。

此方案 **Chrome/Firefox/Edge/Safari 16+ 全支援**，IE 不支援 Service Worker。

參考資源

• CSDN 文章：HTML5 桌面通知詳解
• MDN: Notification API

總結

HTML5 桌面通知 **非 Chrome 專屬**，現代主流瀏覽器均支援。IE 已退役不必適配。需離線推送請上 Service Worker + Push API。