返回顶部
首页 > 资讯 > 前端开发 > html >HTML5中Web Notification怎么用
  • 782
分享到

HTML5中Web Notification怎么用

2024-04-02 19:04:59 782人浏览 安东尼
摘要

小编给大家分享一下HTML5中WEB Notification怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、先睹为快我们先来尝试一个最简单的例子,打开 chrome 开发者工具,

小编给大家分享一下HTML5WEB Notification怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

一、先睹为快

我们先来尝试一个最简单的例子,打开 chrome 开发工具,粘贴代码进去直接运行:

new Notification('jartto\'s 消息通知', {
  dir: 'rtl',
  body: '这是一个消息,通过 Web Notification 发送,作为测试!',
  icon: 'https://raw.GitHubusercontent.com/chenfengyanyu/my-web-accumulation/master/images/loGo.jpeg'
})

并没有出现什么消息通知,怎么回事?不要着急,接着往下看。

二、用户授权

按照上面的示例,我们运行了,但是并没有成功调起消息推送框。这时候需要查看一下是否用户授权,控制台输入: > Notification.permission

很快我们就会发现,原来用户许可是 default ,因为不知道用户的选择,所以浏览器的行为与 denied 时相同,即为拒绝。

三、兼容性

看到这些 html5 的高级 api ,总是会有一些顾虑。例子虽好,用起来也很方便,但是到底兼容性如何,这是一个值得思考的问题。

HTML5中Web Notification怎么用

可以看到,基本上所有浏览器都支持了,除了 iOS SafariOpera Mini ,所以移动端应用需谨慎。

四、API 文档

我们先来系统性的梳理一下 API,很简单,花 5 分钟过一下。

用例:

let notification = new Notification(title, options)

参数:

title:一定会被显示的通知标题

options:一个被允许用来设置通知的对象。它包含以下属性:

  • dir : 文字的方向;它的值可以是 auto (自动), ltr (从左到右), or rtl (从右到左)

  • lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。

  • body: 通知中额外显示的字符串

  • tag: 赋予通知一个 ID ,以便在必要的时候对通知进行刷新、替换或移除。

  • icon: 一个图片的 URL ,将被用于显示通知的图标。

属性:

Notification.permission: 一个用于表明当前通知显示授权状态的字符串。可能的值包括:

  • denied (用户拒绝了通知的显示),

  • granted (用户允许了通知的显示),

  • default (因为不知道用户的选择,所以浏览器的行为与 denied 时相同)

方法:

  • Notification.onclick:处理 click 事件的处理,每当用户点击通知时被触发。

  • Notification.onshow:处理 show 事件的处理,当通知显示的时候被触发。

  • Notification.onerror:处理 error 事件的处理,每当通知遇到错误时被触发。

  • Notification.onclose:处理 close 事件的处理,当用户关闭通知时被触发。

  • Notification.requestPermission():用于当前页面想用户申请显示通知的权限。

  • Notification.close():用于关闭通知。

Notification.requestPermission 这个方法只能被用户行为调用(比如:onclick 事件),并且不能被其他的方式调用。

五、完整示例

按照上面 API ,我们来写一个完整的示例:

function notifyMe(){
  // 先检查浏览器是否支持
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // 检查用户是否同意接受通知
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // 否则我们需要向用户获取权限
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission){
      // 如果用户同意,就可以向他们发送通知
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }


  // 最后,如果执行到这里,说明用户已经拒绝对相关通知进行授权
  // 出于尊重,我们不应该再打扰他们了
}

看完了这篇文章,相信你对“HTML5中Web Notification怎么用”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网html频道,感谢各位的阅读!

--结束END--

本文标题: HTML5中Web Notification怎么用

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

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

猜你喜欢
  • HTML5中Web Notification怎么用
    小编给大家分享一下HTML5中Web Notification怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、先睹为快我们先来尝试一个最简单的例子,打开 chrome 开发者工具,...
    99+
    2024-04-02
  • html5中Notification API怎么用
    这篇文章主要介绍html5中Notification API怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!用户权限想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获...
    99+
    2024-04-02
  • 怎么在HTML5中实现Web Notification桌面右下角通知功能
    这篇文章将为大家详细讲解有关怎么在HTML5中实现Web Notification桌面右下角通知功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。html5桌面通知(Web Notifica...
    99+
    2023-06-09
  • HTML5中如何实现Web Notification桌面通知功能
    这篇文章主要介绍了HTML5中如何实现Web Notification桌面通知功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。有的时候我们会在桌面右下角看到这样的提示:这种...
    99+
    2023-06-09
  • 如何使用HTML5的Notification API制作web通知功能
    本篇内容介绍了“如何使用HTML5的Notification API制作web通知功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大...
    99+
    2024-04-02
  • html5中web本地存储怎么用
    这篇文章主要介绍了html5中web本地存储怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 在html5...
    99+
    2024-04-02
  • HTML5 Notification功能的使用方法
    这篇文章主要讲解了“HTML5 Notification功能的使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML5 Notification功能...
    99+
    2024-04-02
  • Notification怎么在Android中使用
    这期内容当中小编将会给大家带来有关Notification怎么在Android中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。用法首先我们需要一个NotificationManager来对通知进行管理...
    99+
    2023-05-30
    android notification
  • HTML5本地存储中Web Storage怎么用
    这篇文章给大家分享的是有关HTML5本地存储中Web Storage怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 Web Storage是H...
    99+
    2024-04-02
  • HTML5的Web Storage怎么应用
    本文小编为大家详细介绍“HTML5的Web Storage怎么应用”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML5的Web Storage怎么应用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深...
    99+
    2024-04-02
  • 怎么用HTML5开发移动web
    这篇文章将为大家详细讲解有关怎么用HTML5开发移动web,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。   一、移动web开发现状:   当下人们使用频率最高的设备...
    99+
    2024-04-02
  • android notification怎么使用
    要使用Android通知,您可以按照以下步骤操作:1. 创建一个NotificationCompat.Builder对象:使用Not...
    99+
    2023-08-24
    android notification
  • Html5中桌面通知Notification的实现示例
    这篇文章主要介绍Html5中桌面通知Notification的实现示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1. 实例一个Notificationlet n = new ...
    99+
    2023-06-09
  • HTML5的Web Workers怎么创建
    本篇内容主要讲解“HTML5的Web Workers怎么创建”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5的Web Workers怎么创建”吧! w...
    99+
    2024-04-02
  • 怎么启用SAP C4C OData Event Notification
    本篇内容介绍了“怎么启用SAP C4C OData Event Notification”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!当我们...
    99+
    2023-06-04
  • html5 web workers的作用是什么
    本文小编为大家详细介绍“html5 web workers的作用是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“html5 web workers的作用是什么”文章能帮助大家解决疑惑,下面跟着小编的思...
    99+
    2024-04-02
  • 如何使用HTML5实现Notification API桌面通知功能
    这篇文章将为大家详细讲解有关如何使用HTML5实现Notification API桌面通知功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。   为什么需要HTML5的...
    99+
    2024-04-02
  • HTML5中H5Slides怎么用
    这篇文章主要介绍HTML5中H5Slides怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!H5Slides是一款基于HTML5的轻量级幻灯片播放系统,以前我们给客户演示幻灯片时...
    99+
    2024-04-02
  • HTML5中history怎么用
    这篇文章主要为大家展示了“HTML5中history怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML5中history怎么用”这篇文章吧。一、认识w...
    99+
    2024-04-02
  • html5中pause()怎么用
    小编给大家分享一下html5中pause()怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实例带有播放和暂停按钮的一段视频...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作