html5__Notifications API 桌面通知
2023-09-14 08:58:45 时间
MDN地址
google 文档 https://developers.google.cn/web/fundamentals/push-notifications/
const koa2 = require(`koa2`);
const Router = require(`koa-router`);
const router = new Router();
const app = new koa2();
const Index = router.get(`/`, async (ctx, next) => {
await next()
ctx.status = 200;
ctx.type = `html`;
ctx.body = `
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function good(){
var notification = new Notification("hello to..", {
dir: 'ltr',
body: '测试 web Notification API',
tag: 'test',
icon: 'https://pic.cnblogs.com/avatar/1053296/20171128213246.png'
});
notification.onclick = function(e) {
console.log( e);
console.log('每当用户点击通知时被触发');
this.close();
window.open('http://www.cnblogs.com/ajanuw/')
}
notification.onshow = function() {
console.log('通知显示的时候被触发');
}
notification.onerror = function() {
console.log('当通知遇到错误时被触发');
}
notification.onclose = function() {
console.log('用户关闭通知时被触发');
}
}
function run() {
if ('Notification' in window) {
// 查看是否有权限
if (Notification.permission == 'granted') {
good()
} else if(Notification.permission == 'denied' || Notification.permission == 'default') {
// 主动提出需要权限
Notification.requestPermission(permission => {
if (permission == 'granted') {
good()
}
})
}
}
}
run();
</script>
`
}).routes();
app.use(Index);
app.listen(1995);
相关文章
- 盘点:崛起中的九大 HTML5 开发工具
- html5与css交互 API 《一》classList
- 妙趣横生的HTML5 Page Visibility API
- html5的video元素学习手札
- How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口)
- HTML5 Web Audio API实现【董小姐】播放
- html5实现移动端下拉刷新(原理和代码)
- HTML5菜鸟入门指导:简介、平台搭建、示例演示
- HTML5魔法堂:全面理解Drag & Drop API
- HTML5 Video Player概览
- HTML5学习—Canvas API入门
- 【HTML5】SVG内联
- [CSS3 + HTML5] Modernizr
- html5 本地存储
- HTML5 地理位置定位API(4)
- HTML5 地理位置定位API(2)
- 17. Html5的局: VR全景分屏视频距离我们有多远?
- 13. Html5的局:WebGL的模糊边界
- 【HTML5】表单属性
- [Javascript] HTML5 DOM project
- [HTML5] Avoiding CSS Conflicts via Shadow DOM CSS encapsulation
- [HTML5] Why ARIA?
- [HTML5] a tag, rel="noopener"
- HTML5 地理位置定位API(2)
- HTML5 地理位置定位API(1)
- [Html5] HTML5 开发手机应用
- Atitit.常用语言的常用内部api 以及API兼容性对源码级别可移植的重要性 总结
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
- 29行代码使用HTML5 Canvas API绘制一颗红心
- 手机端网页使用html5地理定位获取位置失败的解决办法
- HTML5 postMessage 和 onmessage API 具体应用
- SharePoint 2013的HTML5特性之响应式布局
- 使用 HTML5 File API 实现client log
- html5+ 获取当前设备的加速度信息
- Js学习之拖拉事件(拖动属性)HTML5 drag API(HTML 拖放 API)
- HTML5 — 知识总结篇《VII》【图片元素】