本地推送功能（H5=》高版本瀏覽器）
此文件不能直接使用瀏覽器打開(kāi)（直接打開(kāi)瀏覽器測(cè)試的話(huà)chrome，則不能通過(guò)：直接打開(kāi)文檔 chrome上面的路徑：會(huì)類(lèi)似這種：file:///E:/vue/python/demo2.html）
chrome需要架設(shè)服務(wù)器方能使用，firefox直接打開(kāi)文件是可以的
<!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 = "您看到此條信息桌面提醒設(shè)置成功";
}
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){
// 判斷是否有權(quán)限
if (Notification.permission === "granted") {
var notification = new Notification(title, {
"icon": iconUrl,
"body": content,
});
}
//如果沒(méi)權(quán)限，則請(qǐng)求權(quán)限
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;
}
//如果接受請(qǐng)求
if (permission === "granted") {
var notification = new Notification(title, {
"icon": iconUrl,
"body": content,
});
}
});
}
}
}
</script>
</html>
效果大致如圖，不同瀏覽器都有不同的樣式
