如何在現代瀏覽器中實現桌面通知？-js教程-PHP中文網

如何在現代瀏覽器中實現桌面通知？

Susan Sarandon

發布： 2024-11-04 04:39:29

原創

416 人瀏覽過

How to Implement Desktop Notifications in Modern Browsers?

Chrome 桌面通知示例

現代瀏覽器中存在兩種類型的通知：

桌面通知－易於觸發，只要頁面開啟就有效，並且可能在幾秒鐘後自動消失。
服務工作者通知——有點複雜，但它們可以在後台工作（即使在頁面關閉後），是持久的並且支援操作按鈕。

API 呼叫採用相同參數（操作除外－在桌面通知中不可用），這些參數在MDN 上有詳細記錄，對於服務工作者，則在Google 的Web Fundamentals 網站上記錄。

以下是 Chrome、Firefox、Opera 和 Safari 的桌面通知工作範例。請注意，出於安全原因，從 Chrome 62 開始，可能不再從跨網域框架請求通知 API 權限，因此我們無法使用 StackOverflow 的程式碼片段來示範這一點。您需要將此範例儲存在網站/應用程式的 HTML 檔案中，並確保使用 localhost:// 或 HTTPS。

<code class="js">// 在页面加载时请求权限
document.addEventListener('DOMContentLoaded', function() {
 if (!Notification) {
  alert('Desktop notifications not available in your browser. Try Chromium.');
  return;
 }

 if (Notification.permission !== 'granted')
  Notification.requestPermission();
});


function notifyMe() {
 if (Notification.permission !== 'granted')
  Notification.requestPermission();
 else {
  var notification = new Notification('Notification title', {
   icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
   body: 'Hey there! You\'ve been notified!',
  });
  notification.onclick = function() {
   window.open('http://stackoverflow.com/a/13328397/1269037');
  };
 }
}</code>

登入後複製

<code class="html"><button onclick="notifyMe()">Notify me!</button></code>

登入後複製

以上是如何在現代瀏覽器中實現桌面通知？的詳細內容。更多資訊請關注PHP中文網其他相關文章！