2018-08-16 浏览器本地推送功能
2018-08-16 本文已影响0人
马丁路德东
本地推送功能（H5=》高版本浏览器）
此文件不能直接使用浏览器打开（直接打开浏览器测试的话chrome，则不能通过：直接打开文档 chrome上面的路径：会类似这种：file:///E:/vue/python/demo2.html）
chrome需要架设服务器方能使用，firefox直接打开文件是可以的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="notify('hello','提交上去了')">显示通知消息</button>
</body>
<script>
//桌面提醒
function notify(title, content) {
if(!title && !content){
title = "桌面提醒";
content = "您看到此条信息桌面提醒设置成功";
}
var iconUrl = "http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg";
if (window.webkitNotifications) {
//chrome老版本
if (window.webkitNotifications.checkPermission() == 0) {
var notif = window.webkitNotifications.createNotification(iconUrl, title, content);
notif.display = function() {}
notif.onerror = function() {}
notif.onclose = function() {}
notif.onclick = function() {this.cancel();}
notif.replaceId = 'Meteoric';
notif.show();
} else {
window.webkitNotifications.requestPermission($jy.notify);
}
} else if("Notification" in window){
// 判断是否有权限
if (Notification.permission === "granted") {
var notification = new Notification(title, {
"icon": iconUrl,
"body": content,
});
}
//如果没权限，则请求权限
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function(permission) {
// Whatever the user answers, we make sure we store the
// information
if (!('permission' in Notification)) {
Notification.permission = permission;
}
//如果接受请求
if (permission === "granted") {
var notification = new Notification(title, {
"icon": iconUrl,
"body": content,
});
}
});
}
}
}
</script>
</html>
效果大致如图，不同浏览器都有不同的样式
