.NET Framework 4.8 Web应用通知权限请求失效及多设备通知疑问

场景与代码 #

我正在开发基于.NET Framework 4.8的Web应用，需求为用户填写表单后点击「Add」按钮，向所有已授权设备推送通知。默认情况下浏览器应弹出通知权限请求弹窗供用户选择，但当前无法触发该请求，仅手动在浏览器设置中授权后通知才可正常显示。

编写的JavaScript函数及HTML按钮代码如下：

/* JavaScript */
function notifyMe() {
  var notify = new Notification('My title', {
    body: 'This is the body of the notification.',
    badge: '/Content/badge.png',
    icon: '/Content/icon.png'
  });
  if (!window.Notification) {
    alert('This browser does not support notifications!');
  }
  else {
    alert('Notification is created. Will it get displayed?');
    if (Notification.permission === 'granted') {
      note.showNotification(notify);
    }
    else {
      alert('We are going to ask for permission!');
      Notification.requestPermission().then((permission) => {
        alert('Asking right now!');
        if (permission === 'granted') {
          alert('Notification is coming!');
          note.showNotification(notify);
        }
        else {
          alert('User blocked notifications.');
        }
        alert('By now we must have already been asked!');
      }).catch(function (err) {
        console.error(err);
      });
    }
  }
}

<!-- HTML -->
<input name="submit" type="submit" id="btnSubmit" class="btn btn-default" onclick="notifyMe()" value="Add"/>

调试发现：仅能看到「Notification is created. Will it get displayed?」和「We are going to ask for permission!」的弹窗，随后页面即跳转，Notification.requestPermission().then()内的代码未执行。同时疑问：当前函数是否仅能向填写表单的设备推送通知，能否实现多设备通知？

问题解答 #

1. 通知权限请求无法触发的原因与修复方案 #

原因分析

核心问题是按钮为submit类型，点击后会触发表单提交，导致页面立刻刷新跳转，而Notification.requestPermission()是异步操作，还没等用户完成权限选择，页面就已经刷新，后续的then回调自然无法执行。另外代码还有两处逻辑错误：

• 提前实例化Notification：未获取权限时就创建Notification实例，会直接抛出浏览器错误（无权限不允许创建通知）。
• 错误调用note.showNotification()：note变量未定义，正确逻辑是权限通过后直接创建Notification实例。

修复步骤

1. 阻止表单默认提交行为：在点击事件中传递event参数并调用preventDefault()，确保异步权限请求能完成。
2. 调整Notification实例化时机：仅在权限通过后创建通知实例。
3. 修正通知调用逻辑：移除未定义的note对象，直接使用new Notification()创建通知。

修复后的代码：

function notifyMe(event) {
  // 阻止表单默认提交，保证权限请求能执行完成
  event.preventDefault();

  if (!window.Notification) {
    alert('This browser does not support notifications!');
    return;
  }

  if (Notification.permission === 'granted') {
    // 权限已授权，直接创建通知
    new Notification('My title', {
      body: 'This is the body of the notification.',
      badge: '/Content/badge.png',
      icon: '/Content/icon.png'
    });
    // 通知展示后手动提交表单（按需选择）
    document.querySelector('form').submit();
  } else {
    Notification.requestPermission().then((permission) => {
      if (permission === 'granted') {
        alert('Notification is coming!');
        new Notification('My title', {
          body: 'This is the body of the notification.',
          badge: '/Content/badge.png',
          icon: '/Content/icon.png'
        });
        // 权限获取后提交表单
        document.querySelector('form').submit();
      } else {
        alert('User blocked notifications.');
        // 用户拒绝权限后，也可选择提交表单
        document.querySelector('form').submit();
      }
    }).catch(function (err) {
      console.error(err);
    });
  }
}

<!-- 修改onclick事件，传递event参数 -->
<input name="submit" type="submit" id="btnSubmit" class="btn btn-default" onclick="notifyMe(event)" value="Add"/>

2. 能否实现多设备通知？ #

当前代码仅能向当前操作的设备推送通知，因为浏览器的Notification API是基于本地浏览器实例的，只能触达当前用户正在使用的设备，无法直接发送到其他设备。

要实现多设备通知，需要结合以下技术：

• 前端订阅Web Push：用户授权后，浏览器会生成一个推送订阅对象（包含专属推送端点URL），将该对象发送到后端存储。
• 后端存储订阅信息：把每个用户的所有设备订阅信息关联存储，比如绑定用户ID。
• 后端触发推送：当用户提交表单后，后端遍历该用户的所有已订阅设备，调用Web Push服务向这些设备发送通知。
• 前端Service Worker接收通知：需要在前端注册Service Worker，用于接收后端推送的通知并在浏览器中展示。

简单来说，单纯依靠前端Notification API做不到多设备推送，必须结合后端存储和Web Push技术栈才能实现。

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