返回顶部
首页 > 资讯 > 前端开发 > html >html5中Notification API怎么用
  • 811
分享到

html5中Notification API怎么用

2024-04-02 19:04:59 811人浏览 泡泡鱼
摘要

这篇文章主要介绍HTML5中Notification api怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!用户权限想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获

这篇文章主要介绍HTML5中Notification api怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

用户权限

想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获取一次权限。只有用户允许的权限下,Notification 才能起到作用,避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的?

Notification.permission 该属性用于表明当前通知显示的授权状态,可能的值包括:

  • default :不知道用户的选择,默认。

  • granted :用户允许。

  • denied :用户拒绝。

if(Notification.permission === 'granted'){
    console.log('用户允许通知');}else if(Notification.permission === 'denied'){
    console.log('用户拒绝通知');}else{
    console.log('用户还没选择,去向用户申请权限吧');}

请求权限

当用户还没选择的时候,我们需要向用户去请求权限。Notification 对象提供了 requestPermission() 方法请求用户当前来源的权限以显示通知。

以前基于回调的语法已经弃用(当然在现在的浏览器中还是能用的),最新的规范已将此方法更新为基于 promise 的语法:

Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('用户允许通知');
    }else if(permission === 'denied'){
        console.log('用户拒绝通知');
    }});

推送通知

获取用户授权之后,就可以推送通知了。

var notification = new Notification(title, options)

参数如下:

  • title:通知的标题

  • options:通知的设置选项(可选)。

    • body:通知的内容。

    • tag:代表通知的一个识别标签,相同tag时只会打开同一个通知窗口。

    • icon:要在通知中显示的图标的URL。

    • image:要在通知中显示的图像的URL。

    • data:想要和通知关联的任务类型的数据。

    • requireInteraction:通知保持有效不自动关闭,默认为false。

还有一些其他的参数,因为用不了或者没什么用这里就没必要说了。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧',
    tag: 'linxin',
    icon: 'Http://blog.gdfengshuo.com/images/avatar.jpg',
    requireInteraction: true})

通知消息的效果图如下:

html5中Notification API怎么用

关闭通知

从上面的参数可以看出,并没有一个参数用来配置显示时长的。我想要它 3s 后自动关闭的话,这时可以调用 close() 方法来关闭通知。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧'})setTimeout(function() {
    n.close();}, 3000);

事件

Notification 接口的 onclick属性指定一个事件侦听器来接收 click 事件。当点击通知窗口时会触发相应事件,比如打开一个网址,引导用户回到自己的网站去。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧',
    data: {
        url: 'http://blog.gdfengshuo.com'
    }})n.onclick = function(){
    window.open(n.data.url, '_blank');      // 打开网址
    n.close();                              // 并且关闭通知}

应用场景

前面说那么多,其实就是为了用。那么到底哪些地方可以用到呢?

现在网站的消息提醒,大多数都是在消息中心显示个消息数量,然后发邮件告诉用户,这流程完全没有错。不过像我这种用户,觉得别人点个赞,收藏一下都要发个邮件提醒我,老是要去删邮件(强迫症),我是觉得挺烦的甚至关闭了邮件提醒。

当然这里并不是说要用 Notification,毕竟它和邮件的功能完全不一样。

我觉得比较适合的是新闻网站。用户浏览新闻时,可以推送给用户实时新闻。以腾讯体育为例,它就使用了 Notification API。在页面中引入了一个 notification2017_v0118.js,有兴趣可以看看别人是怎么成熟的使用的。

一进入页面,就获取授权,同时自己页面有个浮动框提示你允许授权。如果允许之后,就开始给你推送通知了。不过它在关闭标签卡的时候,通知也会被关闭,那是因为监听了页面 beforeunload 事件。

function addOnBeforeUnload(e) {
    FERD_NavNotice.notification.close();}if(window.attachEvent){
    window.attachEvent('onbeforeunload', addOnBeforeUnload);} else {
    window.addEventListener('beforeunload', addOnBeforeUnload, false);}

以上是“html5中Notification API怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网html频道!

--结束END--

本文标题: html5中Notification API怎么用

本文链接: https://www.lsjlt.com/news/80856.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • html5中Notification API怎么用
    这篇文章主要介绍html5中Notification API怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!用户权限想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获...
    99+
    2024-04-02
  • HTML5中Web Notification怎么用
    小编给大家分享一下HTML5中Web Notification怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、先睹为快我们先来尝试一个最简单的例子,打开 chrome 开发者工具,...
    99+
    2024-04-02
  • HTML5中的postMessage API怎么用
    今天就跟大家聊聊有关HTML5中的postMessage API怎么用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。关于postMessagewin...
    99+
    2024-04-02
  • HTML5中的WebSocket API怎么用
    本篇内容介绍了“HTML5中的WebSocket API怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2024-04-02
  • 如何使用HTML5的Notification API制作web通知功能
    本篇内容介绍了“如何使用HTML5的Notification API制作web通知功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大...
    99+
    2024-04-02
  • 如何使用HTML5实现Notification API桌面通知功能
    这篇文章将为大家详细讲解有关如何使用HTML5实现Notification API桌面通知功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。   为什么需要HTML5的...
    99+
    2024-04-02
  • HTML5如何实现Notification API桌面通知功能
    这篇文章主要为大家展示了“HTML5如何实现Notification API桌面通知功能 ”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML5如何实现Not...
    99+
    2024-04-02
  • HTML5中的Communication API怎么使用
    本篇内容介绍了“HTML5中的Communication API怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能...
    99+
    2024-04-02
  • HTML5的FileWriter API怎么用
    本文小编为大家详细介绍“HTML5的FileWriter API怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML5的FileWriter API怎么用”文章能帮助大家解决疑惑,下面跟着小编的思...
    99+
    2024-04-02
  • HTML5全屏API怎么用
    本篇内容主要讲解“HTML5全屏API怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5全屏API怎么用”吧! FullScreen API 是一...
    99+
    2024-04-02
  • HTML5的Canvas API怎么用
    这篇文章主要介绍“HTML5的Canvas API怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5的Canvas API怎么用”文章能帮助大家解决问题...
    99+
    2024-04-02
  • HTML5 Notification功能的使用方法
    这篇文章主要讲解了“HTML5 Notification功能的使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML5 Notification功能...
    99+
    2024-04-02
  • 怎么在HTML5项目中使用FileSystem API
    怎么在HTML5项目中使用FileSystem  API?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。HTML5的强大之一就是允许web程序申请一些临时或者永久的...
    99+
    2023-06-09
  • Notification怎么在Android中使用
    这期内容当中小编将会给大家带来有关Notification怎么在Android中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。用法首先我们需要一个NotificationManager来对通知进行管理...
    99+
    2023-05-30
    android notification
  • android notification怎么使用
    要使用Android通知,您可以按照以下步骤操作:1. 创建一个NotificationCompat.Builder对象:使用Not...
    99+
    2023-08-24
    android notification
  • HTML5中Geolocation地理位置定位API怎么用
    这篇文章将为大家详细讲解有关HTML5中Geolocation地理位置定位API怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。基本用法 首先,我们可以从浏...
    99+
    2024-04-02
  • Html5中桌面通知Notification的实现示例
    这篇文章主要介绍Html5中桌面通知Notification的实现示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1. 实例一个Notificationlet n = new ...
    99+
    2023-06-09
  • HTML5 Canvas API有什么用
    这篇文章主要为大家展示了“HTML5 Canvas API有什么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML5 Canvas API有什么用”这篇文...
    99+
    2024-04-02
  • 怎么在HTML5中实现Web Notification桌面右下角通知功能
    这篇文章将为大家详细讲解有关怎么在HTML5中实现Web Notification桌面右下角通知功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。html5桌面通知(Web Notifica...
    99+
    2023-06-09
  • html5中api指的是什么
    html5中api指的是什么,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。在html5中,api是“application programmi...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作