首先要获取权限，如果返回 granted 为获取通知权限成功，如果为 denied 获取通知失败，注⚠️ ：一旦拒绝，就无法通过编程方式挽回，因为不可能再触发授权提示。

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    10. <body>
    11. </body>
    13. </html>
    14. <script>
    15.     Notification.requestPermission().then((res) => {
    16.         if (res === 'granted') {
    17.             console.log('获取权限');
    18.             let n = new Notification('系统消息', {
    19.                 body: 'body 内容',
    20.                 image: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1200969649,1714025549&fm=26&gp=0.jpg",
    21.                 vibrate: true,   //  震动
    22.             })
    24.             //  发送消息后的通知
    25.             n.onshow = function () {
    26.                 console.log('通知显示');
    27.             }
    28.             //  通知被点击时触发
    29.             n.onclick = function(){
    30.                 console.log('通知被点击');
    31.             }
    32.             //  通知消失或被取消
    33.             n.onclose = function(){
    34.                 console.log('通知被关闭');
    35.             }
    36.             //  发送错误阻止通知显示时触发
    37.             n.onerror = function(){
    38.                 console.log('发生错误');
    39.             }
    40.         } else if (res === 'denied') {
    41.             console.log('没有权限');
    42.         }
    43.     })
    45. </script>