JS production for mobile phone and computer notification information effect _JAVASCRIPT skills

Today, the basic project is finished, all the use of free time, write two articles. "How to build node project" Presumably we have to learn all have seen. This article finally shows the effect is really good, so here, want to record down, you can also see later.
Or the same routine as before, we take it one step at a time, so the idea is very clear.

Let's look at the effect first:

Notice the pop-up message that appears in the lower right corner, and that's what we've achieved.

The effect is finished, then go into the distribution explanation mode ...

First step: Write a shelf first .

The next code is written in the script tag, so you just care about what's inside the script tag:

  <! DOCTYPE html>
   
 

Step Two: Determine if the browser supports the Web notifications API

Here to determine whether to support the Web notifications API, only support this thing, we can continue to de things.

   function Justify_notifyapi () {
      if (window). Notification) {
        //support
        Console.log ("support" + "Web notifications API");
      } else {
        //unsupported
        console.log ("Unsupported "+ Web notifications API");
      }
    

Step Three: To determine if the browser supports pop-up instances

Here is a frame, to determine whether the browser support pop-up instance (picture address for your own address can be)

function justify_showmess () {
  if (window). Notification && notification.permission!== "denied") {
    notification.requestpermission (function (status) {
      if (status = = "Granted") {
        var n = new Notification (' Receive information:-O ', {body
          : ' Here is the notification content!) What do you want to see, sir? ',
          icon: '. /.. /images/headerpic/qq picture 20160525234650.jpg "
        });
      else{
        var n = new Notification ("baby! I'll leave you! ");}}

Fourth Step: instances Show pop-up content

The title property of the notification constructor is required to specify the caption of the notification, formatted as a string. The Options property is optional and is formatted as an object to set various settings. The properties of this object are as follows:

Dir: Text direction, possible values are auto, ltr (left to right), and RTL (Right-to-left), typically inheriting browser settings.

Lang: The languages used, such as en-us, zh-cn.

Body: Notification content, formatted as a string, used to further explain the purpose of the notice.

Tag: The ID of the notification, formatted as a string. A set of identical tag notifications, which are not displayed at the same time, will only be displayed in the original location after the user closes the previous notification.

Icon: The URL of the chart to display on the notification.

  function Otification_construct () {

  var notification = new notification (' Incoming mail ', {body
    : ' You have 1 unread messages from the snow. ',
    dir: "Auto",
    Lang: "ZH-CN",
    tag: "A1",
    icon: "." /.. /images/headerpic/772513932673948130.jpg "
  });
  Console.log (Notification.title); "Receive new mail"
  Console.log (notification.body);//"You have a total of 3 unread messages." "
}

Fifth Step: Events related to the Notifications API

The notification instance triggers the following three events:
Show: triggered when notification is displayed to the user.

Click: triggers when the user clicks on the notification.

Close: Triggered when a user closes a notification.

Error: Triggered when an error is notified (occurs when the notification cannot be displayed correctly).

These events have corresponding onshow, onclick, OnClose, onerror methods that specify the corresponding callback functions. The AddEventListener method can also be used to specify callback functions for these events.

function Otification_event () {

  var MM = new Notification ("hi! My beautiful little princess! ", {body
    : ' You have 1 emails to outer space." ',
    icon: '. /.. /images/headerpic/20100114212301-1126264202.jpg "
  });

  Mm.onshow = function () {
    console.log (' Notification showning! ');
  Mm.onclick = function () {
    console.log (' Notification have be click! ');
  Mm.onerror = function () {
    console.log (' Notification have be click! ');
    Manually close
    mm.close ();}
  ;

Here the basic functions have been explained, here is attached to the results of the demo source:

<! DOCTYPE html>  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.