首頁 > web前端 > js教程 > Chrome 中的桌面通知如何運作?

Chrome 中的桌面通知如何運作?

DDD
發布: 2024-11-03 22:21:02
原創
653 人瀏覽過

How Do Desktop Notifications Work in Chrome?

Chrome 桌面通知解釋

現代瀏覽器中的桌面通知可以在螢幕上顯示簡單的訊息。當您想要提醒或通知用戶,即使他們沒有與您的網站互動時,它們特別有用。

有兩種類型的通知:

桌面通知:

  • 易於顯示
  • 幾秒後自動消失
  • 僅在網頁開啟時可用

Service Worker 通知:

  • 實作起來更複雜
  • 實作起來更複雜
  • 可以持久存在,即使網頁關閉時也會出現
支援操作按鈕

存取桌面通知API:

    桌面通知API 對這兩種類型使用類似的參數,如MDN 上所述。若要存取此 API:
  1. 請求頁面載入權限。
  2. 建立一個帶有標題、圖示和正文文字的新通知對象。
分配一個事件監聽器來處理操作(onclick)。

範例實作:
<code class="js">document.addEventListener('DOMContentLoaded', function() {
  if (!Notification) alert('Desktop notifications not available in your browser.');
  if (Notification.permission !== 'granted') Notification.requestPermission();
});

function notifyMe() {
  if (Notification.permission === 'granted') {
    var notification = new Notification('Notification title', {
      icon: 'icon.png',
      body: 'Hey there! You\'ve been notified!',
    });
    notification.onclick = function() {
      window.open('http://example.com');
    };
  } else Notification.requestPermission();
}</code>
登入後複製

<code class="html"><button onclick="notifyMe()">Notify me!</button></code>
登入後複製
HTML:

以上是Chrome 中的桌面通知如何運作?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板