自定义/样式化桌面通知

Zax*_*Zax 5 html javascript css google-chrome google-chrome-extension

我使用 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>

Run Code Online (Sandbox Code Playgroud)

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

所以我的查询是：

是否可以对桌面通知的外观应用一些样式？喜欢以粗体和斜体以及不同的颜色显示字体并更改通知的背景颜色并可能使矩形通知弹出窗口的角变圆？

我试过的：

我了解到以前我们确实有办法做到这一点。那是通过使用 API createHTMLNotification()，但现在同样已被弃用。此外，我尝试为 createHTMLNotification寻找相同替换的替代方案，但它缺乏清晰度。

归档时间：	9 年，1 月前
查看次数：	5654 次
最近记录：	9 年，1 月前