浏览器开启桌面通知Web Notification

本文主要描述如何开启各个浏览器的桌面通知功能

一、谷歌浏览器(chrome)

点击地址栏前面的图标 🔒 或者 ⓘ，修改通知即可

二、360浏览器

在地址栏输入 se://settings/content，找到通知进行设置

三、火狐浏览器(Mozilla Firefox)

您可以通过下列步骤设置站点的权限：

1. 点击图标 打开 控制中心。
2. 点击提示中的箭头。
3. 点击 更多信息 打开页面信息窗口。
4. 点击 权限 标签页。
5. 在 接收通知 部分，选择：总是询问、允许 或 阻止。如果选项灰显，请取消勾选 使用默认 旁边的勾选框。 

详情查看官方文档：https://support.mozilla.org/zh-CN/kb/%E7%BD%91%E9%A1%B5%E6%8E%A8%E9%80%81%E9%80%9A%E7%9F%A5?as=u&utm_source=inproduct

四、Edge浏览器

查看设置 - 查看高级设置 （灰色按钮） ，找到通知进行设置

注意：所有ie浏览器不支持桌面通知，这是个大杯具

 

五、桌面通知实现

原文：https://blog.csdn.net/OBKoro1/article/details/87854555

var options = {
  dir: "auto", // 文字方向
  body: "通知：OBKoro1评论了你的朋友圈", // 通知主体
  requireInteraction: true, // 不自动关闭通知
  // 通知图标 
  icon: "https://upload-images.jianshu.io/upload_images/5245297-818e624b75271127.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
};
notifyMe('这是通知的标题', options);
function notifyMe(title, options) {
  // 先检查浏览器是否支持
  if (!window.Notification) {
    console.log('浏览器不支持通知');
  } else {
    // 检查用户曾经是否同意接受通知
    if (Notification.permission === 'granted') {
      var notification = new Notification(title, options); // 显示通知
    } else if (Notification.permission === 'default') {
      // 用户还未选择，可以询问用户是否同意发送通知
      Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
          console.log('用户同意授权');
          var notification = new Notification(title, options); // 显示通知
        } else if (permission === 'default') {
          console.warn('用户关闭授权 未刷新页面之前 可以再次请求授权');
        } else {
          // denied
          console.log('用户拒绝授权 不能显示通知');
        }
      });
    } else {
      // denied 用户拒绝
      console.log('用户曾经拒绝显示通知');
    }
  }
}

 

 

兼容性

另外，qq浏览器也可以支持，其他的就不知道了

这里摘下别人的东西 

浏览器支持情况：