Customize / Style a Desktop Notification
<p>I got a desktop notification using HTML5 up and running. However, the look and feel of the Desktop Notification seems too simple for my requirement.</p>

<p>Basically, the Desktop notification, as of now is just a simple Text message with a white background on a rectangle.</p>

<p>Below is the code i have used for displaying the Desktop notification:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Notification HTML5&lt;/title&gt;
&lt;script&gt;
function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check if the user is okay to get some notification
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
  var options = {
        body: "This is the body of the notification",
        //icon: "icon.jpg",
        dir : "ltr"
    };
  var notification = new Notification("Hi there",options);
  notification.onclick = function () {
    //console.log("this:"+this);
      //window.open("https://stackoverflow.com/");
      Maximize();
    };
  }

  // Otherwise, we need to ask the user for permission
  // Note, Chrome does not implement the permission static property
  // So we have to check for NOT 'denied' instead of 'default'
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // Whatever the user answers, we make sure we store the information
      if (!('permission' in Notification)) {
        Notification.permission = permission;
      }

      // If the user is okay, let's create a notification
      if (permission === "granted") {
        var options = {
              body: "This is the body of the notification",
              //icon: "icon.jpg",
              dir : "ltr"
          };
        var notification = new Notification("Hi there",options);
      }
    });
  }

  // At last, if the user already denied any notification, and you
  // want to be respectful there is no need to bother them any more.
}
function Maximize() 
{
window.innerWidth = screen.width;
window.innerHeight = screen.height;
window.screenX = 0;
window.screenY = 0;
alwaysLowered = false;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button onclick="notifyMe()" style="height: 80px;width: 311px;color:white;font-size: 24px;background: cadetblue;border: none;cursor: pointer;"&gt;Show me notification&lt;/button&gt;&lt;br&gt;&lt;br&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Below is the image illustrating the way in which the Desktop notification is rendered:</p>

<p><a href="https://i.stack.imgur.com/Qw14T.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Qw14T.png" alt="enter image description here"></a></p>

<p>So my query is:</p>

<p>Is it possible to apply some styling to the appearance of the Desktop notification? Like displaying the font in Bold and italics and in a different colour and changing the background color of the Notification and may be rounding the corners of the rectangular Notification pop-up?</p>

<p>What i tried:</p>

<p>I learnt that previously we did have a way of doing this. That is by using the API <code>createHTMLNotification()</code>, but now the same has been deprecated. Also, i tried finding alternatives for the same <a href="https://stackoverflow.com/questions/16764882/createhtmlnotification-replacement">Replacement for createHTMLNotification</a>, but it lack's clarity.</p>