Notification Desktop Notification Practice

Notification notification practice

Secure Context: This feature is only available in secure context (HTTPS), some supported browsers .

The Notifications API 's notification interface is used to configure and display desktop notifications to the user.

Online example

see the code at the end of the text

Construction method

 let notification = new Notification(title, options)

parameter

title

Defines the title of a notification that will be displayed at the top of the notification window when it is fired.

options optional

The options object contains any custom settings options applied to the notification. Options are:

dir : Displays the direction of the notification. The default is auto, which follows the browser language setting behavior, you can also override this behavior by setting the values of ltr and rtl (although most browsers seem to ignore these settings)

lang : The language of the notification, as specified using a DOMString representing a BCP 47 language tag. See the Sitepoint ISO 2-letter language codes page for an easy reference.

badge : A USVString containing the URL of the image used to represent the notification when there is not enough space to display the notification itself.

body : A DOMString representing the body of the notification, which will be displayed below the title.

tag : A DOMString representing an identifying tag for the notification.

icon : A USVString containing the URL of the icon to be displayed in the notification.

image : A USVString containing the URL of the image to be displayed in the notification.

data : Any data you want to associate with the notification. This can be any data type.

vibrate : a vibration pattern vibration pattern The device's vibration hardware emits when a notification fires.

renotify : A Boolean (en-US) specifying whether the user should be notified after a new notification replaces an old one. The default is false, which means they won't be notified.

requireInteraction : Indicates that the notification should remain active until the user clicks or dismisses it, rather than automatically dismissing it. The default value is false.

The following options are listed in the latest specification, but are not supported in any browser.

silent : A Boolean (en-US) indicating whether the notification should be silent, i.e., no sound or vibration is required, regardless of device settings. The default is false, which means it won't be silent.

sound : A USVString containing the URL of the audio file to play when the notification fires.

noscreen : a Boolean (en-US) specifying whether the notification trigger should enable the device's screen. The default is false, which means it will enable the screen.

sticky : A Boolean (en-US) indicating whether the notification should be "sticky", ie not easily cleaned by the user. The default is false, which means it won't stick.

Check if the browser supports it

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

Get authorization

Before using desktop notifications we need to get the user's permission to run notifications from the current source
requestPermission() method can do this, there are three return values granted（允许） , denied（拒绝） or default（默认） .

Note: When the user rejects the notification, it needs to be re-opened in the browser 系统-隐私设置和安全性-通知 , chrome re-open for reference

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

send notification

 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);

This way you won't miss some important information
window Google will show image as a picture showing Firefox

Google

mac up image the picture will not be displayed

event

Turn off notifications

close() method is used to dismiss a previously displayed notification.

This code will automatically close the notification after 4 seconds

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

click notification

When the user clicks on the notification, some custom things can be done.

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

sample code

Open a new tab in the browser, open the console, paste the following code to experience

 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://cdn.wangzc.wang/uPic/Xs7W4K-2022-06-13-112152.jpg",
    icon: "https://cdn.wangzc.wang/uPic/SZQpJu-2022-06-13-112235.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;
    };
}