html5桌面上通告(Web Notifications)案例分析

日期:2021-02-25 类型:科技新闻 

关键词:在线小程序开发,微信小程序怎么做店铺,小程序logo设计,小程序平台,小程序码生成

html5桌面上通告(Web Notifications)针对必须完成在新信息入线时,有桌面上通告实际效果的状况下十分有效,在此简易详细介绍1下这个html5的新特性。

这里有个非常好的demo:html5 web notification demo

从上面这个demo中 大家便可以获得所必须的基础关键编码,以下:


拷贝编码
编码以下:
<script>
var Notification = window.Notification || window.mozNotification || window.webkitNotification;

Notification.requestPermission(function (permission) {
// console.log(permission);
});

function show() {
var instance = new Notification(
"test title", {
body: " test message"
}
);

instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
};
instance.onclose = function () {
// Something to do
};

return false;
}
</script>

 
在其中:Notification.requestPermission 这句编码的作用便是向客户恳求管理权限容许

根据以上的事例,基础思路大家早已有了,最先载入文本文档时,就向客户恳求管理权限,获得管理权限后之后都so easy了。


拷贝编码
编码以下:
window.addEventListener('load', function () {
// At first, let's check if we have permission for notification
if (Notification && Notification.permission !== "granted") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
});

火狐下 认证是根据的,可是在chrome下一直出不来,后来发现这样1段话


拷贝编码
编码以下:
Not a Bug, Feature.

Desktop Notifications can only be triggered via a user action. Typing into the
JavaScript console has the same effect as raw javascript code embedded into the web
page (no user action). Typing the javascript into the location bar, however,
represents a user-action (the user is intentionally visiting a javascript link to
enable notifications, probably for sites that tend to use href="javascript:" instead
of onclick="".

I'm pretty sure this is a non-issue.

原先在chrome下是务必要客户手动式开启的,不然,chrome访问器会疏忽这段的js

可是在大家网站里毫无疑问不能能加1个按钮或超连接来显式的让客户受权吧,好吧, 具体上这也并不是个事儿,大家能够在客户常常点的按钮上顺带解决下这个受权就好,在chrome下是1次受权终生有效。除非你进到设定把他禁了。

整合1下,编码以下:


拷贝编码
编码以下:
function showMsgNotification(title, msg){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;

if (Notification && Notification.permission === "granted") {
var instance = new Notification(
title, {
body: msg,
icon: "image_url"
}
);

instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
// console.log(instance.close);
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// Something to do
};
}else if (Notification && Notification.permission !== "denied") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
// If the user said okay
if (status === "granted") {
var instance = new Notification(
title, {
body: msg,
icon: "image_url"
}
);

instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// Something to do
};

}else {
return false
}
});
}else{
return false;
}

}

上一篇:html5 升级照片色调示例编码 返回下一篇:没有了