type
status
date
slug
summary
tags
category
icon
password
参考:
一、前言
最近业务开发中,有一个需求,需要弹出桌面通知弹窗。
这是我从没做过的,所以开贴与大家分享一下,另外讲一下存在的问题。
二、Notification
2.1 通知实例
- title:标题
- options:配置(可选)
2.2 通知的配置
也是弹窗的组成部分:
- image 通知弹窗的上方大图
- icon 图标
- requireInteraction 下方的关闭按钮(默认值为 false)
- silent 通知声音静音(默认值为 false)
- body 通知内容
等等。
注意:
- body 内容最多能显示 4 行。
- image, icon 本地和远程的 url 都支持。
- requireInteraction 默认为 false,会自动关闭通知。只有设置为 true 后,面板下方才能出现“关闭”按钮,此时监听通知的关闭事件才有效果;另外,设置为 true 后,这类弹窗无法自动关闭。
- silent 默认为 false,设置为 true 后,就不会有系统提示音了,这个可以不用去系统里设置谷歌浏览器的通知声音,用这个属性就能解决。
三、可运行的代码
原功能比这个更加复杂,这里做了简化。
四、总结与风险点评估
Notification 将浏览器 API 与 windows 通知功能结合,作为通知用户的一种方式显得非常巧妙,仅仅是通知也比较合适。但过度的定制化,开发性价比是不高的,存在一些问题尚未解决或难以解决。
- 一次只能在右下角显示一个,无法叠加显示多个通知面板。
- 通过点击通知面板右上角的“x”图标关闭弹窗时,无法监听到点击事件、也无法监听到关闭事件。
- for循环依次新建通知面板时,通知面板的弹出顺序是乱序的,可能是因为线程不同导致的。
- 当用户将浏览器窗口最小化,想要实现点击通知回到原网页,似乎难以解决。
但这里提供一个取巧的方案(https://developer.mozilla.org/zh-CN/docs/Web/API/Window/close),利用 window.open() 打开一个新标签页(newTab),然后立即再通过 window.close() 去关闭 newTab,让用户好像就回到了原网页一样。
- 浏览器兼容性可能不太好
- 为了确保安全,这个API只允许在 HTTPS 环境下使用,但是也可以通过特别的方式去设置,这里不赘述。
- 作者:Eric 见嘉
- 链接:https://tangly1024.com/article/notification-in-broswer
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章