JS如何实现通知？Notification API

if (!('Notification' in window)) {
    console.warn('当前浏览器不支持桌面通知');
    // 可以提供备用方案，比如页面内消息提示
    return;
}

function requestNotificationPermission() {
    // 检查当前权限状态
    if (Notification.permission === 'granted') {
        console.log('用户已授予通知权限。');
        return Promise.resolve();
    }

    if (Notification.permission === 'denied') {
        console.warn('用户已拒绝通知权限。');
        // 可以在这里提示用户如何在浏览器设置中重新开启
        return Promise.reject('Permission Denied');
    }

    // 如果是 'default' 或其他状态，则请求权限
    return Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
            console.log('用户已授予通知权限。');
        } else {
            console.warn('用户拒绝了通知权限。');
        }
        return permission;
    });
}

function showNotification(title, options = {}) {
    requestNotificationPermission().then(permission => {
        if (permission === 'granted') {
            const defaultOptions = {
                body: '这是一条来自网页的通知。', // 通知主体内容
                icon: '/path/to/your/icon.png', // 通知图标
                image: '/path/to/your/image.png', // 通知内的图片
                badge: '/path/to/your/badge.png', // 徽章图标，主要用于移动设备
                tag: 'my-unique-notification-tag', // 标签，用于替换旧通知
                renotify: true, // 新通知是否应该重新提醒用户（即使tag相同）
                silent: false, // 是否静音
                requireInteraction: false, // 是否需要用户点击才能关闭
                data: {
                    url: 'https://example.com/some-page' // 关联数据，可以在点击事件中获取
                }
            };

            const finalOptions = { ...defaultOptions, ...options };
            const notification = new Notification(title, finalOptions);

            // 监听通知的点击事件
            notification.onclick = function(event) {
                console.log('通知被点击了！', event);
                // 可以在这里打开一个新页面或切换到相关标签页
                if (finalOptions.data && finalOptions.data.url) {
                    window.open(finalOptions.data.url, '_blank');
                }
                notification.close(); // 点击后关闭通知
            };

            // 监听通知的关闭事件
            notification.onclose = function() {
                console.log('通知被关闭了。');
            };

            // 监听通知的错误事件
            notification.onerror = function() {
                console.error('通知显示出错。');
            };

        } else {
            console.warn('无法显示通知，因为权限未授予。');
        }
    }).catch(error => {
        console.error('请求通知权限失败:', error);
    });
}

// 示例：点击按钮显示通知
// 显示通知

Notification.permission

showNotification('新邮件', {
    body: '来自张三的邮件：关于项目进度的讨论。',
    icon: '/path/to/mail-icon.png',
    actions: [
        { action: 'reply', title: '回复', icon: '/path/to/reply-icon.png' },
        { action: 'mark-read', title: '标记已读', icon: '/path/to/read-icon.png' }
    ],
    data: { messageId: '12345' }
}).then(notification => {
    notification.addEventListener('actionclick', event => {
        console.log(`用户点击了动作：${event.action}`);
        if (event.action === 'reply') {
            // 打开回复界面
            window.open(`/compose?replyTo=${event.notification.data.messageId}`, '_blank');
        } else if (event.action === 'mark-read') {
            // 调用API标记邮件已读
            console.log(`标记邮件 ${event.notification.data.messageId} 为已读`);
        }
        notification.close();
    });
});

renotify

Push API

self.registration.showNotification()

options

badge