浏览器桌面提示：Notification

最新推荐文章于 2025-01-11 09:51:17 发布

leewen5

最新推荐文章于 2025-01-11 09:51:17 发布

阅读量1.4k

点赞数

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/leewen5/article/details/116496418

版权

Web通知 Notification API 用户权限事件处理浏览器兼容性

关键词由优快云通过智能技术生成

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Web Notifications API的用途、属性和方法，包括如何请求用户权限、显示及关闭通知。通过示例代码展示了如何创建具有交互功能的通知，并提醒读者注意运行环境要求。同时，讨论了浏览器的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

提示：浏览器桌面提示：Notification

提示：以下是本篇文章正文内容，下面案例可供参考

Notifications用途

Notifications API 的通知接口用于向用户配置和显示桌面通知。

语法：


let notification = new Notification(title, options)

title：定义一个通知的标题，当它被触发时，它将显示在通知窗口的顶部。

options 【可选】对象包含应用于通知的任何自定义设置选项。选项有：

dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
body: 通知中额外显示的字符串
tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
icon: 一个图片的URL，将被用于显示通知的图标。

以上部分选项配置，请进入 MDN 查看更详细的配置选项

属性

Notification.permission

用来表明用户是否允许当前域显示Web Notification.

var permission = Notification.permission;

该属性的可能值为：

granted: 用户已经明确的授予了显示通知的权限。.
denied: 用户已经明确的拒绝了显示通知的权限。
default: 用户还未被询问是否授权; 这种情况下权限将视为 denied.

Notification.onclick

当用户点击一个显示的Notification时，会发生这些事件。

Notification.onclick= function() { ... };

Notification.onclose

当一个Notification关闭时，会发生这些事件。

Notification.onclose= function() { ... };

Notification.onerror

当一个 Notification 发生错误时，会发生这些事件。

Notification.onerror= function() { ... };

Notification.onshow

当一个 Notification 显示时，会发生这些事件。

Notification.onshow = function() { ... };

方法

请求用户权限显示通知

Notification 接口的 requestPermission() 方法请求用户当前来源的权限以显示通知。

Notification.requestPermission()

最新的规范已将此方法更新为基于promise的语法，工作原理如下：


Notification.requestPermission().then(function(permission) { ... });

以前，语法是基于一个简单的回调；此版本现~~已弃用~~ ：

Notification.requestPermission(callback);

在这里插入图片描述

关闭Notification

Notification 接口的 close() 的方法用于关闭一个以前显示的通知。

Notification.close();

实例

全部代码：将下面代码保存到一个html文件中：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="notifyme">Notify me!</button>

  <script>
    // 打开页面显示通知
    window.addEventListener('load', function () {
      // 这里你也可以进入页面就提示授权通知
      // 按钮绑定点击事件
      var button = document.getElementById("notifyme");
      button.addEventListener('click', function () {
        showNotification("打开百度", {
          icon: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
          body: "http://www.baidu.com",
          data: {
            url: "http://www.baidu.com"
          }
        });
      }, false);
    });

    function showNotification(title, options) {
      var Notification = window.Notification || window.mozNotification || window.webkitNotification;
      if (Notification) {
        Notification.requestPermission(function (status) {
          // status默认值
          // 'default' 表示拒绝， 
          // 'denied' 表示用户不想要通知，
          // 'granted' 表示用户同意启用通知
          if (status != "granted") return;
          var tag = "sds" + Math.random();
          var notify = new Notification(title, {
            dir: 'auto',
            lang: 'zh-CN',
            requireInteraction: true,
            data: options.data,
            tag: tag,//实例化的notification的id
            icon: options.icon,//通知的缩略图,//icon 支持ico、png、jpg、jpeg格式
            body: options.body //通知的具体内容
          });
          notify.onclick = function () {
            //如果通知消息被点击,通知窗口将被激活
            window.focus();
            notify.close();
            //打开对应的界面
            window.open(notify.data.url, '_blank');
          };
          notify.onerror = function () {
            console.log("消息出错！！！");
          };
          notify.onclose = function () {
            console.log("消息关闭！！！");
          };
        });
      } else {
        console.log("您的浏览器不支持桌面消息");
      }
    };
  </script>
</body>

</html>