一、效果

二、代码

google浏览器要在设置通知权限开启

 // Google消息提示
        googleNewsTip() {
            // 请求用户授权显示通知
            Notification.requestPermission().then(function (permission) {
                if (permission === 'granted') {
                    // 创建新的通知，并设置标题、内容和图标等选项
                    var notification = new Notification('来电提示！', {
                        body: '您有一个新的来电提示！',
                        icon: '../assets/images/new_login_logo.png', // 替换为广告图标的 URL
                    })

                    // 在通知中添加自定义样式
                    notification.addEventListener('show', function () {
                        // 创建弹框容器元素
                        var container = document.createElement('div')
                        container.classList.add('ad-container')

                        // 创建弹框内容元素
                        var content = document.createElement('div')
                        content.classList.add('ad-content')
                        content.textContent = '您有一个新的用户来电！'

                        // 将内容添加到容器中
                        container.appendChild(content)

                        // 在页面底部显示弹框
                        document.body.appendChild(container)
                    })
                }
            })
        },