• Notification html5 的通知api


    https://developer.mozilla.org/zh-CN/docs/Web/API/notification

    使用方法

    var notification = new Notification(title, options)

    参数

    title: 标题

    option: 可选

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

    属性

      静态属性 - 这些属性仅在 Notification 对象上有效。

    • Notification.permission: 一个用于表明当前通知显示授权状态的字符串。可能的值包括:denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择,所以浏览器的行为与 denied 时相同)

      实例属性  - 这些属性仅在 Notification 的实例中有效。

    • Notification.title     在构造方法中指定的 title 参数 (只读) 
    • Notification.dir      知的文本显示方向。在构造方法的 options 中指定(只读)。
    • Notification.lang    通知的语言。在构造方法的 options 中指定(只读)。
    • Notification.body   通知的文本内容。在构造方法的 options 中指定(只读)。
    • Notification.tag   通知的 ID。在构造方法的 options 中指定(只读)。
    • Notification.icon    通知的图标图片的 URL 地址。在构造方法的 options 中指定(只读)。

    事件处理:这些事件 在 Notification 的实例中有效

    • Notification.onclick 处理 click 事件的处理。每当用户点击通知时被触发。
    • Notification.onshow  处理 show 事件的处理。当通知显示的时候被触发。
    • Notification.onerror 处理 error 事件的处理。每当通知遇到错误时被触发。
    • Notification.onclose 处理 close 事件的处理。当用户关闭通知时被触发。

    方法:

      静态方法 - 这些方法仅在 Notification 对象中有效

    • Notification.requestPermission()  用于当前页面想用户申请显示通知的权限。这个方法只能被用户行为调用(比如:onclick 事件),并且不能被其他的方式调用。

      实例方法  - 这些方法仅在 Notification 实例或其 prototype 中有效

    • Notification.close() 用于关闭通知。

     实例:

    html

        <button onclick="notifyMe()">Notify me!</button>
        <button id="btn">关闭通知</button>

    js

        function notifyMe() {
            // 先检查浏览器是否支持
            if (!("Notification" in window)) {
                alert("This browser does not support desktop notification");
            }
            // 检查用户是否同意接受通知
            else if (Notification.permission === "granted") {
                tz();
            }
            // 否则我们需要向用户获取权限
            else if (Notification.permission !== 'denied') {
                Notification.requestPermission(function (permission) {
                    // 如果用户同意,就可以向他们发送通知
                    if (permission === "granted") {
                        tz();
                    }
                });
            }
            function tz() {
                var notification = new Notification("Hi there!");
                notification.onshow = function(){
                    console.log('通知显示');
                }
                notification.onclick = function(){
                    console.log('点击通知');
                }
                var $btn = document.querySelector('#btn');
                $btn.onclick = function(){
                    console.log('关闭通知');
                    notification.close();
                }
                $btn = null;
            }
            // 最后,如果执行到这里,说明用户已经拒绝对相关通知进行授权
            // 出于尊重,我们不应该再打扰他们了
        }

     

      

  • 相关阅读:
    Careercup
    Careercup
    Careercup
    Careercup
    Careercup
    Careercup
    Careercup
    Careercup
    Careercup
    Careercup
  • 原文地址:https://www.cnblogs.com/bruce-gou/p/9848494.html
Copyright © 2020-2023  润新知