前端实现浏览器通知功能指南

2. 编写 JS 核心逻辑

// 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;
  }
}

// 4. 判断浏览器类型，返回对应通知设置页 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 '';
  }
}

// 5. 引导用户手动开启权限的函数
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. 刷新页面后重新尝试');
  }
}

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

  const permission = Notification.permission;
  if (permission === 'granted') {
    isNoticeEnabled = true;
    alert('通知权限已开启！可以发送通知啦～');
    sendNoticeBtn.disabled = false;
    guideReEnableBtn.style.display = 'none';
  } else if (permission === 'denied') {
    guideReEnableBtn.style.display = 'block';
    sendNoticeBtn.disabled = true;
    alert('你之前拒绝了通知权限！请点击页面上的「重新开启通知权限」按钮，可选择直接跳转到设置页操作。');
  } else {
    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('申请通知权限失败，请刷新页面重试');
    }
  }
}

// 7. 发送通知（核心函数 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();
  };

  setTimeout(() => {
    notice.close();
  }, 3000);
}

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

3. 测试步骤

1. 将 HTML 代码保存为 .html 文件；
2. 使用 Chrome、Edge 等现代浏览器打开（建议使用 VS Code 的 Live Server 插件，地址栏显示 http://localhost）；
3. 点击'1. 开启通知权限'按钮，选择'允许'；
4. 允许后，'发送测试通知'按钮变亮；
5. 如果选择'拒绝'，页面会显示「重新开启通知权限」按钮，点击后可跳转设置页；
6. 点击'2. 发送测试通知'按钮，桌面会弹出通知，3 秒后自动关闭。

四、常见问题

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

原因：浏览器不支持，或者打开方式不是 localhost/HTTPS。 解决：用 Chrome/Edge 浏览器，用 VS Code 的 Live Server 打开。

2. 弹不出权限弹窗？

原因：之前拒绝过权限，浏览器会持久化保存'拒绝'状态。 解决：点击「重新开启通知权限」按钮，跳转到浏览器设置页将权限改为「允许」。

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

原因：系统通知被关闭了。 解决：

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

4. 手机上测试没效果？

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

五、进阶技巧

1. 自定义通知内容：将 new Notification 里的标题、body 换成变量，实现动态通知；
2. 避免通知堆积：使用 tag 配置项，相同 tag 的通知会替换旧的；
3. 离线也能发通知：学习「Service Worker」，搭配 Notification API 实现离线通知；
4. 浏览器设置页快速跳转：通过判断浏览器类型，实现点击按钮直接跳转到通知设置页。

六、总结

浏览器通知功能的核心是「先申请权限，再发送通知」。注意'安全环境（HTTPS/localhost）'和'用户主动授权'这两个关键点，即可顺利实现功能。