html5的消息通知

这里介绍一个HTML5的notification demo：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>notification</title></head><body><button id="button">消息通知</button><script>// var button = document.getElementById('#button');var button = document.querySelector('#button'); //上面那样写不可以
            button.addEventListener('click', function() {if (!("Notification" in window)) {alert("不支持notification");} else if (Notification.permission === "granted") { // 允许通知
                    notice();} else if (Notification.permission !== "denied") {// 用户没有选择是否显示通知，向用户请求许可
                    Notification.requestPermission(function(permission) {if(permission === "granted") {notice();}});}}, false)function notice() {var notification = new Notification("你好，JavaScript", {body: '微信订阅号'});notification.onclick = function() {notification.close();}}</script></body>
</html>

将该demo部属在nginx上（详见上一篇随笔），在谷歌浏览器（支持HTML5 notification的浏览器就可以）中打开页面，会看到pc端右下角弹出消息通知。

转载于:https://www.cnblogs.com/liyan22/p/6683137.html

html5的消息通知相关推荐

html 消息通知功能,HTML5之消息通知的使用(Web Notification)
关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍.系统的了解,站在更高的高度去思考问题,这样才能事半功倍. 一.先睹为快我们先来尝试一个最简单的例子,打开 chrome 开发者 ...
html在线消息,HTML5之消息通知的使用(Web Notification)
关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍.系统的了解,站在更高的高度去思考问题,这样才能事半功倍. 一.先睹为快我们先来尝试一个最简单的例子,打开 chrome 开发者 ...
【VUE】浏览器消息通知（声音提醒，标题栏闪动，弹框提醒）
思路: 浏览器通知使用Notification,详情可查看Notification.Notification() 标题栏闪动利用循环实现声音提醒可以使用播放本地音频实现总结:在当前页面接收到消息时 ...
uni-app 全局消息通知弹窗（App端）
uni-app 全局消息通知弹窗(App端) 实现效果实现一个顶部的全局消息通知,并且可以常驻,除非手动关闭. 效果图如下收到告警通知弹窗从顶部向下弹出,可点击跳转到对应页面,可上滑关闭弹窗,弹 ...
消息通知系统详解1---通讯方式
消息通知系统详解1-通讯方式消息通知系统详解2-后端设计消息通知系统详解3-Netty 消息通知系统详解4-整合Netty和WebSocket 目录什么是消息通知系统系统特性通讯方式短连接 ...
Electron Notification动态消息通知
Notification通知使用 Notification通知的使用方法有多种,在此介绍三种使用方式文章目录 Notification通知使用一.Notification是什么? 二.使用步骤 1 ...
[UWP]实现一个轻量级的应用内消息通知控件
[UWP]实现一个轻量级的应用内消息通知控件原文:[UWP]实现一个轻量级的应用内消息通知控件在UWP应用开发中,我们常常有向用户发送一些提示性消息的需求.这种时候我们一般会选择MessageDi ...
Redis消息通知系统的实现
Redis消息通知系统的实现 Posted on 2012-02-29 by 老王 http://huoding.com/2012/02/29/146 最近忙着用Redis实现一个消息通知系统,今天大 ...
SCOM警报通知新特性：即时消息通知
使用过SCOM的朋友应该了解,相对MOM,SCOM增加了"即时消息"和"短信"两种警报通知方式.今天我将给大家介绍其中之一,"即时消息"告警 ...

html5的消息通知

html5的消息通知相关推荐

最新文章

热门文章