Edge浏览器Push.js推送通知权限请求实现方案咨询

核心问题原因 #

Edge基于Chromium内核，但对通知权限触发有更严格的安全限制：

• 禁止页面加载时自动发起权限请求，必须由用户主动的、明确的交互动作触发（比如点击特定按钮，而非全局document点击）
• 全局document的点击事件可能被Edge判定为非用户主动操作，无法触发权限弹窗

具体解决方案 #

1. 添加明确的权限请求按钮 #

在页面中添加用户可见的专属按钮，用于触发通知权限请求：

<button id="request-notification-btn">开启通知提醒</button>

2. 修改JS逻辑，绑定按钮点击事件 #

移除页面初始化时直接调用的Push.Permission.request()，将权限请求逻辑绑定到按钮点击事件上，确保是用户主动触发：

import Push from 'push.js';

init() {
  const requestBtn = document.getElementById('request-notification-btn');
  if (!requestBtn) return;

  // 按钮点击触发权限请求
  requestBtn.addEventListener('click', () => {
    const currentPermission = Push.Permission.get();
    if (currentPermission === 'default') {
      Push.Permission.request(this.onGranted, this.onDenied);
    } else if (currentPermission === 'granted') {
      // 已授权时直接展示通知
      this.onGranted();
    } else {
      // 已拒绝时提示用户手动开启权限
      alert('通知权限已被禁止，请在浏览器设置中手动开启');
    }
  });
}

// 独立提取授权成功回调
onGranted() {
  Push.create("My Notification", {
    body: 'Some text',
    icon: someIcon,
    link: someUrl,
    vibrate: [200, 100],
  });
}

// 可选：授权失败回调
onDenied() {
  alert('您拒绝了通知权限，将无法接收提醒');
}

3. 关键细节说明 #

• 必须使用**明确的用户交互元素（如按钮）**触发权限请求，Edge会拦截非用户主动触发的权限请求
• 避免在页面初始化阶段直接调用Push.Permission.request()，这会被Edge的安全策略阻止
• 增加权限状态判断，对已授权/已拒绝的情况给出对应提示，提升用户体验

为什么Pushengage能在Edge中正常工作？ #

Pushengage的实现正是遵循了Edge的安全要求：通过独立按钮触发权限请求，确保是用户主动发起的操作，而非页面自动触发，因此能正常弹出权限提示。

内容的提问来源于stack exchange，提问作者Alex