栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

Chrome桌面通知示例

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Chrome桌面通知示例

在现代浏览器中,有两种通知类型:

  • 桌面通知易于触发,只要打开页面即可工作,并且可能在几秒钟后自动消失
  • Service Worker通知稍微复杂一点,但是它们可以在后台(即使关闭页面后)也可以工作,并且是持久性的,并支持操作按钮

API调用采用相同的参数(操作除外-在桌面通知中不可用),这些参数已在Google的Web基础站点上的MDN和服务工作者中详细记录。


以下是适用于Chrome,Firefox,Opera和Safari 的 桌面 通知的工作示例。请注意,出于安全原因,从Chrome
62开始,可能不再需要跨源iframe请求NotificationAPI的权限,因此我们无法使用StackOverflow的代码段进行演示。您需要将此示例保存在站点/应用程序的HTML文件中,并确保使用

localhost://
或HTTPS。

// request permission on page loaddocument.addEventListener('DOMContentLoaded', function() { if (!Notification) {  alert('Desktop notifications not available in your browser. Try Chromium.');  return; } if (Notification.permission !== 'granted')  Notification.requestPermission();});function notifyMe() { if (Notification.permission !== 'granted')  Notification.requestPermission(); else {  var notification = new Notification('Notification title', {   icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',   body: 'Hey there! You've been notified!',  });  notification.onclick = function() {   window.open('http://stackoverflow.com/a/13328397/1269037');  }; }} <button onclick="notifyMe()">Notify me!</button>

我们正在使用W3C NotificationsAPI。请勿将此与Chrome扩展通知API混淆。Chrome扩展程序通知显然仅在Chrome扩展程序中有效,并且不需要用户的任何特殊权限。

请注意,由于该bug,Chrome无法使用Linux上的通知图标。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/456716.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号