Notification通知實踐

安全上下文: 此項功能僅在安全上下文(HTTPS), 一些支援的瀏覽器.

Notifications API 的通知介面用於向使用者配置和顯示桌面通知。

線上示例

見文末程式碼

構造方法

let notification = new Notification(title, options)

引數

title

定義一個通知的標題，當它被觸發時，它將顯示在通知視窗的頂部。

options 可選

options物件包含應用於通知的任何自定義設定選項。選項有：

dir: 顯示通知的方向。預設是auto，跟隨瀏覽器語言設定行為，你也可以通過設定ltr和rtl的值來覆蓋該行為（雖然大多數瀏覽器似乎忽略這些設定）

lang: 通知的語言，如使用代表一個BCP 47語言標籤的 DOMString 指定的。請參閱Sitepoint ISO 2字母語言內碼表面，以獲得簡單的參考。

badge: 一個 USVString 包含用於表示通知的影像的URL, 當沒有足夠的空間來顯示通知本身時。

body: 一個 DOMString 表示通知的正文，將顯示在標題下方。

tag: 一個 DOMString 代表通知的一個識別標籤。

icon: 一個 USVString 包含要在通知中顯示的圖示的URL。

image: 一個 USVSTring包含要在通知中顯示的影像的URL。

data: 您想要與通知相關聯的任意資料。這可以是任何資料型別。

vibrate: 一個振動模式 vibration pattern 裝置的振動硬體在通知觸發時發出。

renotify: 一個 Boolean (en-US) 指定在新通知替換舊通知後是否應通知使用者。預設值為false，這意味著它們不會被通知。

requireInteraction: 表示通知應保持有效，直到使用者點選或關閉它，而不是自動關閉。預設值為false。

以下選項列在最新規範中，但在任何瀏覽器中都不支援.

silent: 一個 Boolean (en-US) 指明通知是否應該是無聲的,即,不需要發出聲音或振動，無論裝置設定如何。預設值為false，這意味著它不會保持靜默。

sound:一個 USVString 包含通知觸發時要播放的音訊檔案的URL。

noscreen: 一個 Boolean (en-US) 指定通知觸發是否應啟用裝置的螢幕。預設值為false，這意味著它將啟用螢幕。

sticky: 一個 Boolean (en-US) 指明通知是否應該是“粘”, 即不易被使用者清理。預設值為false，這意味著它不會粘。

檢測瀏覽器是否支援

if (!("Notification" in window)) {
  alert("抱歉，此瀏覽器不支援桌面通知！");
}

獲取授權

在使用桌面通知前我們需要獲取使用者執行當前來源通知的許可權
requestPermission()方法可以做此事情，返回值有三個 granted（允許）， denied（拒絕） 或者 default（預設）。

注意：當使用者拒絕通知後需要在瀏覽器系統-隱私設定和安全性-通知重新開啟，chrome重新開啟參考

Notification.requestPermission().then(function(result) {
  if (result === 'denied') {
    console.log('使用者拒絕');
    return;
  }
  if (result === 'default') {
    console.log('使用者未授權');
    return;
  }
  // 同意通知
});

傳送通知

let notification = null;
const title = "巨蟹座-00年";
const options = {
  dir: "auto", // 文字方向
  body: "這是我的好姐妹，可以介紹給你", // 通知主體
  requireInteraction: true, // 不自動關閉通知
  image: "https://gitee.com/Wzhichao/img/raw/master/uPic/IMG_xxxxx327356%20.png",
  icon: "https://gitee.com/Wzhichao/img/raw/master/uPic/QlkqKm47%20.jpg",  // 通知圖示
};
notification = new Notification(title, options);

這樣就不會錯過某些重要的資訊了
window谷歌會顯示image的圖片展示
火狐

谷歌
window
mac上image圖片不會進行顯示

mac

事件

關閉通知

close() 方法用於關閉一個以前顯示的通知。

這段程式碼會在4秒後自動關閉通知

let notification = new Notification(title, options);
setTimeout(notification.close.bind(notification), 4000);

點選通知

當使用者點選通知後，可以做一些自定義的事情。

let notification = new Notification(title, options);
notification.onclick = () => {
    alert(1);
};

示例程式碼

在瀏覽器新開一個標籤頁，開啟控制檯，貼上以下程式碼即可體驗

notify()
function notify() {
    if (!("Notification" in window)) {
    alert("抱歉，此瀏覽器不支援桌面通知！");
    }
    Notification.requestPermission().then(function (result) {
    if (result === "denied") {
        console.log("使用者拒絕");
        return;
    }
    if (result === "default") {
        console.log("使用者未授權");
        return;
    }
    // 同意通知
    sendMesg();
    });
}

function sendMesg() {
    let notification = null;
    const title = "巨蟹座-00年";
    const options = {
    dir: "auto", // 文字方向
    body: "這是我的好姐妹，可以介紹給你", // 通知主體
    data: {
        originUrl: `https://developer.mozilla.org/zh-CN/docs/Web/API/notification`,
    },
    requireInteraction: true, // 不自動關閉通知
    image:
        "https://gitee.com/Wzhichao/img/raw/master/uPic/IMG_xxxxx327356%20.png",
    icon: "https://gitee.com/Wzhichao/img/raw/master/uPic/QlkqKm47%20.jpg", // 通知圖示
    };
    notification = new Notification(title, options);
    //setTimeout(notification.close.bind(notification), 4000);
    notification.onclick = ({ currentTarget: { data } }) => {
    notification.close();
    window.focus();
    window.location.href = data.originUrl;
    };
}

Notification桌面通知實踐