Web Notifications desktop notification js encapsulation

Keywords: Attribute

var NotificationHandler = {  
    isNotificationSupported: 'Notification' in window,  
    isPermissionGranted: function() {  
        return Notification.permission === 'granted';  
    },  
    requestPermission: function() {  
        if (!this.isNotificationSupported) {  
            console.log('the current browser does not support Notification API');  
            return;  
        }  

        Notification.requestPermission(function(status) {  
            //Status is the authorization status. If the user is allowed to display desktop notifications, the status is' granted '  
            console.log('status: ' + status);  

            //permission read only property  
            var permission = Notification.permission;  
            //default the user does not receive or refuse the authorization. The notification cannot be displayed  
            //granted users are authorized to display notifications  
            //Denied user denied authorization not allowed to display notification  

            console.log('permission: ' + permission);  
        });  
    },  
    showNotification: function() {  
        if (!this.isNotificationSupported) {  
            console.log('the current browser does not support Notification API');  
            return;  
        }  
        if (!this.isPermissionGranted()) {  
            console.log('the current page has not been granted for notification');  
            return;  
        }  

        var n = new Notification("sir, you got a message", {  
            icon: 'img/icon.png',  
            body: 'you will have a meeting 5 minutes later.'  
        });  

        //The onshow function is called when the message box is displayed  
        //Can do some data recording and timing operation, etc  
        n.onshow = function() {  
            console.log('notification shows up');  
            //Close message box in 5 seconds  
            setTimeout(function() {  
                n.close();  
            }, 5000);  
        };  

        //Called when message box is clicked  
        //You can open related views and close the message box at the same time  
        n.onclick = function() {  
            alert('open the associated view');  
            //opening the view...  
            n.close();  
        };  

        //When an error occurs, the onerror function is called  
        //If there is no granted authorization, the onerror function will also be executed when the Notification object instance is created  
        n.onerror = function() {  
            console.log('notification encounters an error');  
            //do something useful  
        };  

        //The onclose function is called when a message box is closed  
        n.onclose = function() {  
            console.log('notification is closed');  
            //do something useful  
        };  
    }  
};  

document.addEventListener('load', function() {  
    //try to request permission when page has been loaded.  
    NotificationHandler.requestPermission();  
});  

We see that the above code creates an object of NotificationHandler to manage message related event logic. Normally, our process is like this: after the page is loaded, call the requestPermission function to request the user authorization, then the page code executes a period of time, and then need to display a message, then call the showNotification function to display the message. For example:

setTimeout(function() {  
    //if there has new mail, show notification  
    NotificationHandler.showNotification();  
}, 5000);  

It should be noted that not all browsers support Notification, so we added an isNotificationSupported attribute to identify whether message notifications are supported by browsers. In the above code, if we recognize that browsers do not support this API, we will directly return it. Of course, in actual development, we can choose to use other forms to mention it Wake up users.

Posted by ramus on Tue, 31 Mar 2020 10:48:39 -0700