JS如何实现通知提醒

Notification API

Notification API

// 检查浏览器是否支持Notification API
if ('Notification' in window) {
    // 请求权限
    Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
            // 用户同意了，现在可以发通知了
            console.log('用户已授予通知权限');
            // 举个例子，发一个通知
            new Notification('新消息提醒', {
                body: '您有一条来自小明的消息：你好！',
                icon: 'https://example.com/icon.png', // 通知图标
                tag: 'new-message', // 允许你对通知进行分组或替换
                renotify: true, // 如果tag相同，是否重新振动/播放声音
                silent: false // 是否静音
            });
        } else if (permission === 'denied') {
            // 用户拒绝了
            console.warn('用户拒绝了通知权限');
            // 可以在这里提示用户如何手动开启
        } else {
            // 用户没做选择，或者权限状态是'default'
            console.info('用户未对通知权限做出选择');
        }
    });
} else {
    // 浏览器不支持Notification API，可能需要降级处理，比如使用页面内通知
    console.warn('您的浏览器不支持桌面通知');
}

// 还可以监听通知的点击、关闭等事件
const myNotification = new Notification('点击我试试', { body: '这是一个可点击的通知' });
myNotification.onclick = function() {
    console.log('通知被点击了！');
    window.focus(); // 聚焦到当前窗口
    this.close(); // 关闭通知
};
myNotification.onclose = function() {
    console.log('通知被关闭了。');
};
myNotification.onerror = function() {
    console.error('通知显示出错。');
};

function showInPageNotification(message, type = 'info', duration = 3000) {
    const notificationContainer = document.getElementById('in-page-notification-container');
    if (!notificationContainer) {
        console.error('未找到通知容器元素');
        return;
    }

    const notificationDiv = document.createElement('div');
    notificationDiv.className = `in-page-notification ${type}`; // 比如 type 可以是 'info', 'success', 'error'
    notificationDiv.textContent = message;

    // 添加一些简单的样式（实际项目中会更复杂）
    notificationDiv.style.cssText = `
        padding: 10px 20px;
        margin-bottom: 10px;
        background-color: #f0f0f0;
        border-radius: 4px;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    `;
    if (type === 'success') notificationDiv.style.backgroundColor = '#d4edda';
    if (type === 'error') notificationDiv.style.backgroundColor = '#f8d7da';

    notificationContainer.appendChild(notificationDiv);

    // 渐入效果
    setTimeout(() => {
        notificationDiv.style.opacity = '1';
    }, 10); // 小延迟确保DOM渲染

    // 自动消失
    setTimeout(() => {
        notificationDiv.style.opacity = '0';
        notificationDiv.addEventListener('transitionend', () => {
            notificationDiv.remove();
        }, { once: true }); // 确保事件只触发一次
    }, duration);
}

// 假设页面中有个这样的容器：<div id="in-page-notification-container" style="position: fixed; top: 20px; right: 20px; z-index: 1000;"></div>
// 调用示例：
// showInPageNotification('操作成功！', 'success');
// showInPageNotification('请检查您的输入。', 'error', 5000);

Notification.requestPermission()

// 假设有一个按钮让用户主动开启通知
document.getElementById('enable-notifications-btn').addEventListener('click', () => {
    if ('Notification' in window) {
        Notification.requestPermission().then(permission => {
            if (permission === 'granted') {
                console.log('通知已开启');
                // 可以发个欢迎通知
                new Notification('通知已开启', { body: '您将不会错过任何重要更新。' });
            } else if (permission === 'denied') {
                alert('您已拒绝通知权限。如需开启，请前往浏览器设置手动允许。');
            } else {
                // 'default' 状态，用户可能只是关闭了弹窗
                console.log('用户未授予权限，但也没有明确拒绝。');
            }
        });
    } else {
        alert('您的浏览器不支持桌面通知功能。');
    }
});