1. Notification.requestPermission(function (status) {
    2. console.log(status) // 仅当值为 "granted" 时显示通知
    3. var n = new Notification('title', { body: 'notification body' }) // 显示通知
    4. })
    1. <!--
    2. * @Description:
    3. * @Author: huhaonan@sics.ac.cn
    4. * @Date: 2021-07-13 17:37:54
    5. * @LastEditors: huhaonan@sics.ac.cn
    6. * @LastEditTime: 2022-06-23 14:52:45
    7. -->
    8. <!DOCTYPE html>
    9. <html lang="en">
    10. <head>
    11. <meta charset="UTF-8">
    12. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    13. <meta name="viewport" content="width=header, initial-scale=1.0">
    14. <title>Notification</title>
    15. </head>
    16. <body>
    17. <header>
    18. </header>
    19. <script type="text/javascript">
    20. function doNotify(title, options = {}, events = {}) {
    21. const notification = new Notification(title, options);
    22. for (let event in events) {
    23. notification[event] = events[event];
    24. }
    25. }
    26. function notify(title, options = {}, events = {}) {
    27. console.log('lllllll')
    28. if (!("Notification" in window)) {
    29. return console.error("This browser does not support desktop notification");
    30. }
    31. else if (Notification.permission === "granted") {
    32. doNotify(title, options, events);
    33. } else if (Notification.permission !== "denied") {
    34. Notification.requestPermission().then(function (permission) {
    35. if (permission === "granted") {
    36. doNotify(title, options, events);
    37. }
    38. });
    39. }
    40. }
    41. notify("中奖提示", {
    42. icon: "https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/f1a9f122e925aeef5e4534ff7f706729~300x300.image",
    43. body: "恭喜你,掘金签到一等奖",
    44. tag: "prize"
    45. }, {
    46. onclick(ev) {
    47. console.log(ev);
    48. ev.target.close();
    49. window.focus();
    50. }
    51. })
    52. </script>
    53. </body>
    54. </html>