首页 > web前端 > js教程 > Chrome 中的桌面通知如何工作?

Chrome 中的桌面通知如何工作?

DDD
发布: 2024-11-03 22:21:02
原创
655 人浏览过

How Do Desktop Notifications Work in Chrome?

Chrome 桌面通知解释

现代浏览器中的桌面通知可以在屏幕上显示简单的消息。当您想要提醒或通知用户,即使他们没有与您的网站交互时,它们特别有用。

有两种类型的通知:

桌面通知:

  • 易于显示
  • 几秒后自动消失
  • 仅在网页打开时可用

Service Worker 通知:

  • 实现起来更复杂
  • 可以持久存在,即使网页关闭时也会出现
  • 支持操作按钮

访问桌面通知 API:

桌面通知 API 对这两种类型使用类似的参数,如 MDN 上所述。要访问此 API:

  1. 请求页面加载权限。
  2. 创建一个带有标题、图标和正文文本的新通知对象。
  3. 分配一个事件监听器来处理操作(onclick)。

示例实现:

<code class="js">document.addEventListener('DOMContentLoaded', function() {
  if (!Notification) alert('Desktop notifications not available in your browser.');
  if (Notification.permission !== 'granted') Notification.requestPermission();
});

function notifyMe() {
  if (Notification.permission === 'granted') {
    var notification = new Notification('Notification title', {
      icon: 'icon.png',
      body: 'Hey there! You\'ve been notified!',
    });
    notification.onclick = function() {
      window.open('http://example.com');
    };
  } else Notification.requestPermission();
}</code>
登录后复制

HTML:

<code class="html"><button onclick="notifyMe()">Notify me!</button></code>
登录后复制

以上是Chrome 中的桌面通知如何工作?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板