语言►JavaScript►Notification

如何在浏览器中推送通知

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/03/14/%E5%A6%82%E4%BD%95%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E6%8E%A8%E9%80%81%E9%80%9A%E7%9F%A5/

摘要

本文主要讲述了：

  1. 什么是 Notification
  2. Notification.permission
  3. Notification.requestPermission()
  4. new Notification()
  5. 实例的show事件
  6. 实例的close事件
  7. 实例的click事件
  8. 实例的error事件
  9. Notification.prototype.close()
  10. 实例的 tag 属性

正文

什么是 Notification

Notification是 1 个构造函数，它被委托在window对象下，也可以独立使用。

开发者可以通过Notification来推送通知。

Notification.permission

在网页向用户推送通知之前，需要向用户申请许可。

Notification.permission表示用户许可。

取值范围：

  • default 未申请许可
  • granted 同意许可
  • denied 拒绝许可

Notification.requestPermission()

Notification.requestPermission()用来向用户申请许可。

有 2 种调用方式。

示例：基于Promise的调用方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      Notification.requestPermission()
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    </script>
  </body>
</html>

示例：基于callback的调用方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      Notification.requestPermission(function (res) {
        console.log(res);
      });
    </script>
  </body>
</html>

特别注意：对于 Chrome 62+或 Firefox 67+，只有使用 HTTPS 协议的网站才能申请许可。如果是 HTTP 协议，Notification.permission直接变为denied。

new Notification()

在用户同意许可之后，调用new Notification()来构造 1 个通知对象。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      Notification.requestPermission()
        .then((res) => {
          console.log(res);
          if (res === 'granted') {
            setTimeout(() => {
              new Notification('title', {
                body: 'body',
              });
            }, 1e3);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    </script>
  </body>
</html>

实例的show事件

此事件在通知显示的时候触发。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      Notification.requestPermission()
        .then((res) => {
          console.log(res);
          if (res === 'granted') {
            const notice = new Notification('title', {
              body: 'body',
            });
            notice.addEventListener('show', function (event) {
              console.log(event);
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    </script>
  </body>
</html>

实例的close事件

此事件在通知被关闭的时候触发。

注意：此事件并不一定是用户关闭触发的，也可能是通知长时间没有得到用户响应而被系统关闭触发的。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      Notification.requestPermission()
        .then((res) => {
          console.log(res);
          if (res === 'granted') {
            const notice = new Notification('title', {
              body: 'body',
            });
            notice.addEventListener('close', function (event) {
              console.log(event);
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    </script>
  </body>
</html>

实例的click事件

此事件在通知被点击的时候触发。

注意：通知在被点击之后也会触发close事件。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      Notification.requestPermission()
        .then((res) => {
          console.log(res);
          if (res === 'granted') {
            const notice = new Notification('title', {
              body: 'body',
            });
            notice.addEventListener('click', function (event) {
              console.log(event);
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    </script>
  </body>
</html>

实例的error事件

此事件在通知发生错误的时候触发。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      Notification.requestPermission()
        .then((res) => {
          console.log(res);
          if (res === 'granted') {
            const notice = new Notification('title', {
              body: 'body',
            });
            notice.addEventListener('error', function (event) {
              console.log(event);
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    </script>
  </body>
</html>

Notification.prototype.close()

此方法用来手动关闭通知。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      Notification.requestPermission()
        .then((res) => {
          console.log(res);
          if (res === 'granted') {
            const notice = new Notification('title', {
              body: 'body',
            });
            setTimeout(() => {
              notice.close();
            }, 5e2);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    </script>
  </body>
</html>

实例的 tag 属性

给通知设定 1 个tag，如果以相同的tag的再次发起通知，就能顶替之前的通知。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      Notification.requestPermission()
        .then((res) => {
          console.log(res);
          if (res === 'granted') {
            new Notification('title', {
              body: 'foo',
              tag: 'test',
            });
            setTimeout(() => {
              new Notification('title', {
                body: 'bar',
                tag: 'test',
              });
            }, 5e2);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    </script>
  </body>
</html>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/03/14/%E5%A6%82%E4%BD%95%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E6%8E%A8%E9%80%81%E9%80%9A%E7%9F%A5/

本文对你有帮助？请支持我

支付宝
微信