Question

我使用HTML5启动并运行了桌面通知。但是，桌面通知的外观和感觉似乎对我的要求来说太简单了。

基本上，桌面通知，截至目前只是一条简单的短信，在矩形上有白色背景。

以下是我用于显示桌面通知的代码：

<html>
<head>
<title>Notification HTML5</title>
<script>
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;
}
</script>
</head>
<body>
<button onclick="notifyMe()" style="height: 80px;width: 311px;color:white;font-size: 24px;background: cadetblue;border: none;cursor: pointer;">Show me notification</button><br><br>

</body>
</html>

下面的图片说明了呈现桌面通知的方式：

所以我的查询是：

是否可以将某些样式应用于桌面通知的外观？比如以粗体和斜体显示字体以及以不同的颜色显示字体并更改通知的背景颜色，可能会使矩形通知弹出窗口的角落变圆？

我尝试了什么：

我了解到之前我们确实有办法做到这一点。这是通过使用API createHTMLNotification()，但现在不推荐使用它。此外，我尝试寻找相同Replacement for createHTMLNotification的替代品，但缺乏清晰度。

自定义/设置桌面通知的样式

0 个答案: