小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
推送是启动和运行 Javascript 桌面通知的最快方式。HTML5新增了Notification
, 用于向用户配置和显示桌面通知
Notification
生成的通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,也会在主屏幕的右上角显示通知,然后在一段时间后消失。我们可以监听通知的显示,点击,关闭等事件
如果使用Service Worker
实现了离线功能的时候,页面即使关闭了,notification依旧可以正常运作
如果没有实现Service Worker
, 那么只有在用户开启了存在执行notification逻辑的页面(无论是激活状态,挂起状态 还是最小化)notification都可以正常进行推送,但此时如果当前页面处于关闭状态,是无法进行信息推送的 ,因为此时推送逻辑根本无法执行
传统的通知实现
在以前,我们的通知实现主要是通过闪烁页面的标题内容来实现,实现原理其实很简单,就是定时器不断修改document.title
的值。
var titleInit = document.title, isShine = true;
setInterval(function() {
var title = document.title;
if (isShine == true) {
if (/新/.test(title) == false) {
document.title = '【你有新消息】';
} else {
document.title = '【 】';
}
} else {
document.title = titleInit;
}
}, 500);
// 浏览器窗体获得焦点
window.onfocus = function() {
isShine = false;
};
// 浏览器窗体失去焦点
window.onblur = function() {
isShine = true;
};
这种提示有个致命的缺陷,就是用户的浏览器要一直是开的。如果用户浏览器最小化,标题就看不见,自然就无法及时get到有新消息的信息
基本使用
// Notification是一个类
let notification = new Notification(title, options)
/*
1. 参数一: 通知标题
2. 参数二: 参数的配置对象
*/
const notification = new Notification(message, {
icon: 'https://www.example.com/5bc7e68a-ef80-4d12-9453-b001165db6cb',
body: '通知的主体部分'
})
// 获取推送的信息 --- 这些信息都是只读的
console.log(notification.title)
console.log(notification.title)
console.log(notification.icon)
事件
click
: 用户点击通知时被触发show
: 通知显示的时候被触发error
: 通知遇到错误时被触发close
: 用户关闭通知时被触发
更多的配置和回调事件可以在MDN上进行查看
示例
export function createDesktopNotification(title) {
// 浏览器是否支持Notification
if ('Notification' in window) {
/*
Notification.permission 用于表明当前通知显示的授权状态,它有三个值:
+ default: 默认值,用户还未选择或未做任何选择就关闭了询问框
+ granted: 用户允许该网站发送通知
+ denied: 用户拒绝该网站发送通知
*/
// 用户同意接收推送 --- 不必立即发送通知,可以在任意时刻,以任意形式来发送通知
if (Notification.permission === 'granted') {
createNewNotification(title)
} else if (Notification.permission !== 'denied') {
// 询问用户是否同意接收推送 --- Notification.permission的值为default的时候
const res = Notification.requestPermission().then(res => {
if (res === 'granted') {
createNewNotification(title)
} else {
console.log(res) //eslint-disable-line no-console
}
})
}
} else {
// eslint-disable-next-line no-console
console.log('This browser does not support desktop notification')
}
}
function createNewNotification(title) {
const options = {
body: '推送的body部分内容',
icon: 'https://www.example.com/5bc7e68a-ef80-4d12-9453-b001165db6cb'
}
const newNoti = new Notification(title || 'default title', options)
// 默认将焦点移到与该通知相关联的窗口 --> 也就是将当前页(代码执行页面)变成浏览器的激活页面
newNoti.onclick = () => window.focus()
// 4s后,自动关闭推送通知框
setTimeout(() => {
newNoti.close()
}, 4000)
}
push.js
notification是HTML5提供的API,在不同的浏览器上支持情况并不一样
所以对于老版本的浏览器,可能是不支持notification的
为此,社区提供了一个简单易懂的第三方库 push.js
具体的相关配置,可以查看官网
# 安装
$ npm install push.js
// 使用默认配置
Push.create('Hello World!')
// 自定义配置
Push.create("Hello world!", {
body: "body content",
icon: '/icon.png',
timeout: 4000,
onClick: function () {
window.focus()
this.close()
}
})