舉例說明如何實現瀏覽器桌面通知？

王铁柱6發表於2024-11-28
瀏覽器

要實現瀏覽器桌面通知，你需要使用 Notification API。以下是一個簡單的例子，演示瞭如何請求許可權並在獲得許可權後顯示通知：

// 檢查瀏覽器是否支援通知
if ("Notification" in window) {
  // 檢查通知許可權
  if (Notification.permission === "granted") {
    // 如果已獲得許可權，直接顯示通知
    showNotification();
  } else if (Notification.permission !== "denied") {
    // 如果未獲得許可權，請求許可權
    Notification.requestPermission().then(function (permission) {
      // 如果使用者接受，顯示通知
      if (permission === "granted") {
        showNotification();
      }
    });
  } else {
    // 如果使用者拒絕了通知許可權，可以引導使用者到瀏覽器設定中重新開啟
    console.log("使用者已拒絕通知許可權");
    // 可以在這裡新增一些提示資訊，引導使用者重新開啟通知許可權
    // 例如：alert("請在瀏覽器設定中開啟通知許可權");
  }
} else {
  // 瀏覽器不支援通知 API
  console.log("瀏覽器不支援通知 API");
}


function showNotification() {
  // 建立通知
  const notification = new Notification("新訊息提醒", {
    body: "您有一條新訊息！",
    icon: "/path/to/icon.png", // 可選：通知圖示
    tag: "new-message", // 可選：通知標籤，用於區分不同的通知
    // 其他可選引數，例如：
    // requireInteraction: true, // 通知保持顯示，直到使用者點選或關閉
    // silent: true, // 靜默通知，不發出聲音
    // data: { url: "/messages" }, // 自定義資料，可以在點選通知時使用
    // actions: [ // 自定義操作按鈕
    //   { action: "reply", title: "回覆" },
    //   { action: "archive", title: "存檔" }
    // ]
  });

  // 點選通知時觸發
  notification.onclick = function (event) {
    // 可以在這裡開啟一個新的頁面或執行其他操作
    console.log("通知被點選");
    window.open("https://www.example.com"); // 例如開啟一個新頁面
    // 如果設定了 data 屬性，可以透過 event.notification.data 獲取
    // console.log(event.notification.data.url);
  };

  // 通知關閉時觸發
  notification.onclose = function () {
    console.log("通知被關閉");
  };

  // 錯誤處理
  notification.onerror = function (event) {
    console.error("通知出錯:", event);
  };
}

程式碼解釋:

  1. Notification API: 核心 API，用於建立和管理通知。
  2. Notification.permission: 檢查通知許可權狀態，值為 granted（已授權）、denied（已拒絕）或 default（未請求）。
  3. Notification.requestPermission(): 請求通知許可權，返回一個 Promise。
  4. new Notification(title, options): 建立一個新的通知，title 為標題，options 為可選引數，例如 body（內容）、icon（圖示）等。
  5. 事件處理: onclick、onclose、onerror 等事件可以用於處理通知的互動和錯誤。

關鍵點:

  • 使用者體驗: 最好在使用者進行某些操作後（例如點選按鈕）再請求通知許可權，避免突然彈出請求框，影響使用者體驗。
  • 圖示: icon 引數可以指定一個圖示，使通知更具吸引力。
  • 標籤: tag 引數可以用於區分不同的通知，相同標籤的通知會覆蓋之前的通知。
  • 許可權: 使用者可以隨時在瀏覽器設定中更改通知許可權。
  • HTTPS: 在大多數瀏覽器中，只有在 HTTPS 網站上才能使用 Notification API。

這個例子提供了一個基本的框架，你可以根據自己的需求進行修改和擴充套件。 例如，可以新增自定義的操作按鈕、設定通知的持續時間、處理通知的點選事件等。 記住，良好的使用者體驗至關重要，不要濫用通知功能，以免打擾使用者。

相關文章