浏览器桌面通知功能从零实现指南

第二步：编写 JS 核心逻辑

接下来我们把 JS 逻辑填进去。这里有个细节要注意：当用户拒绝权限后，我们不能再次调用 requestPermission 弹窗，所以需要一个专门的引导函数来帮用户跳转到设置页。

// 1. 先获取页面上的所有按钮
const requestPermissionBtn = document.getElementById('requestPermissionBtn');
const sendNoticeBtn = document.getElementById('sendNoticeBtn');
const guideReEnableBtn = document.getElementById('guideReEnableBtn');

// 2. 定义一个变量，记录通知是否可用（方便后续判断）
let isNoticeEnabled = false;

// 3. 检测浏览器是否支持通知功能（避免在不支持的浏览器上报错）
function checkBrowserSupport() {
    if ('Notification' in window) {
        return true;
    } else {
        alert('你的浏览器不支持通知功能，请升级浏览器！');
        return false;
    }
}

// 新增：判断浏览器类型，返回对应通知设置页 URL（适配主流浏览器）
function getBrowserNoticeSettingsUrl() {
    const userAgent = navigator.userAgent;
    if (userAgent.includes('Chrome') && !userAgent.includes('Edg')) {
        return 'chrome://settings/content/notifications';
    } else if (userAgent.includes('Edg')) {
        return 'edge://settings/content/notifications';
    } else if (userAgent.includes('Firefox')) {
        return 'about:preferences#privacy';
    } else {
        return '';
    }
}

// 新增：引导用户手动开启权限的函数
function guideReEnablePermission() {
    const settingsUrl = getBrowserNoticeSettingsUrl();
    
    if (settingsUrl) {
        const choice = confirm('请按以下步骤开启通知权限：\n\n1. 点击「确定」直接跳转到浏览器通知设置页\n2. 在设置页找到当前网站，将通知权限改为「允许」\n3. 刷新当前页面即可生效\n\n如果跳转失败，请手动操作：点击地址栏左侧小锁图标→找到「通知」→改为「允许』');
        if (choice) {
            try {
                window.open(settingsUrl, '_blank');
            } catch (error) {
                alert('跳转失败，请手动操作：点击地址栏左侧小锁图标→找到「通知」→改为「允许』');
            }
        }
    } else {
        alert('请按以下步骤手动开启通知权限：\n\n1. 点击浏览器地址栏左侧的「小锁图标」🔒\n2. 在弹出的菜单中找到「通知」选项\n3. 把「通知」状态从「阻止」改成「允许』\n4. 刷新页面后重新尝试');
    }
}

// 4. 申请通知权限（核心函数 1）
async function requestNoticePermission() {
    if (!checkBrowserSupport()) return;

    const permission = Notification.permission;
    
    if (permission === 'granted') {
        // 情况 1：用户已经允许过了
        isNoticeEnabled = true;
        alert('通知权限已开启！可以发送通知啦～');
        sendNoticeBtn.disabled = false;
        guideReEnableBtn.style.display = 'none';
    } else if (permission === 'denied') {
        // 情况 2：用户之前拒绝过，显示引导按钮
        guideReEnableBtn.style.display = 'block';
        sendNoticeBtn.disabled = true;
        alert('你之前拒绝了通知权限！请点击页面上的「重新开启通知权限」按钮，可选择直接跳转到设置页操作。');
    } else {
        // 情况 3：用户还没选过，弹出请求弹窗
        try {
            const userChoice = await Notification.requestPermission();
            if (userChoice === 'granted') {
                isNoticeEnabled = true;
                alert('你同意了通知权限！');
                sendNoticeBtn.disabled = false;
                guideReEnableBtn.style.display = 'none';
            } else {
                alert('你拒绝了通知权限，无法收到通知哦～\n如果后续想开启，可点击页面上的「重新开启通知权限」按钮。');
                guideReEnableBtn.style.display = 'block';
            }
        } catch (error) {
            console.error('申请权限失败：', error);
            alert('申请通知权限失败，请刷新页面重试');
        }
    }
}

// 5. 发送通知（核心函数 2）
function sendTestNotice() {
    if (!isNoticeEnabled) {
        alert('请先点击第一个按钮开启通知权限！');
        return;
    }

    const notice = new Notification('测试通知来啦！', {
        body: '恭喜你！成功发送了第一条浏览器通知～',
        icon: 'https://img.icons8.com/fluency/96/000000/notification.png',
        tag: 'test-notice',
        silent: false
    });

    // 点击通知时的操作：打开浏览器窗口，并关闭通知
    notice.onclick = function () {
        window.focus();
        notice.close();
    };

    // 3 秒后自动关闭通知（避免一直留在桌面）
    setTimeout(() => {
        notice.close();
    }, 3000);
}

// 绑定事件
requestPermissionBtn.addEventListener('click', requestNoticePermission);
sendNoticeBtn.addEventListener('click', sendTestNotice);
guideReEnableBtn.addEventListener('click', guideReEnablePermission);

第三步：测试步骤

1. 把上面的 HTML 代码复制到一个文本文件里，把文件后缀改成 .html（比如 notice-test.html）；
2. 用 Chrome、Edge 等现代浏览器打开这个文件。注意：直接双击打开可能无法触发权限弹窗，建议使用 VS Code 的 Live Server 插件打开（地址栏显示 http://localhost:5500/...），这样能正常测试；
3. 点击'1. 开启通知权限'按钮：第一次点击会弹出浏览器的权限弹窗，选择'允许'；
4. 允许后，'发送测试通知'按钮会变亮（从灰色变成可点击）；
5. 如果选择'拒绝'，页面会显示「重新开启通知权限」按钮，点击后可选择直接跳转到浏览器设置页，或查看手动开启步骤；
6. 点击'2. 发送测试通知'按钮：桌面会弹出通知，有标题、正文和图标，3 秒后自动关闭；点击通知会把浏览器调到前台。

四、常见问题排查

1. 点击'开启权限'没反应？

原因通常是浏览器不支持，或者打开方式不是 localhost/HTTPS。解决：用 Chrome/Edge 浏览器，确保使用 Live Server 打开（地址栏是 http://localhost 开头）。

2. 弹不出权限弹窗？

如果之前拒绝过权限，浏览器会持久化保存'拒绝'状态，后续无法通过代码再次弹出权限申请弹窗（这是浏览器的保护机制）。解决：使用页面中的「重新开启通知权限」按钮，点击后可选择直接跳转到浏览器设置页（适配 Chrome/Edge/Firefox），将通知权限从「阻止」改为「允许」，然后刷新页面。

3. 发送通知后，桌面没显示？

这通常不是浏览器的问题，而是系统通知被关闭了。

• Windows：打开「设置→系统→通知和操作」，确保'通知'开启，并且浏览器的通知权限也开启；
• Mac：打开「系统设置→通知」，找到对应的浏览器，开启'允许通知'。

4. 手机上测试没效果？

手机浏览器要求'通知请求必须由用户主动点击触发'（不能自动弹），且部分手机需要在系统设置里开启浏览器通知。解决：用手机浏览器打开文件（同样用 Live Server，确保手机和电脑在同一个网络），手动点击'开启权限'按钮，再发送通知。

五、进阶小技巧

1. 自定义通知内容：发送通知时，把 new Notification('标题', {配置}) 里的标题、body 换成变量，就能实现'动态通知'（比如显示不同的消息内容）；
2. 避免通知堆积：用 tag 配置项，相同 tag 的通知会替换旧的（比如连续发两条'新消息'通知，只会显示最新的一条）；
3. 离线也能发通知：如果需要'页面关闭后还能收到通知'，可以学习 Service Worker，搭配 Notification API 就能实现离线通知；
4. 浏览器设置页快速跳转：通过判断浏览器类型，可实现点击按钮直接跳转到通知设置页，避免用户手动找路径（本文已实现该功能，适配主流浏览器）。

六、总结

浏览器通知功能的核心就是「先申请权限，再发送通知」。学习者只要记住这 2 步，再跟着上面的代码和步骤测试，就能快速上手。关键是要注意'安全环境（HTTPS/localhost）'和'用户主动授权'这两个点，避开常见坑就能顺利实现功能啦。

如果需要在实际项目中使用，只要把上面的测试代码稍作修改（比如替换图标、修改通知内容），就能直接用在自己的网页里！