这是昨晚上在一个typecho交流群里群主提到的,他说要做一个桌面通知插件,但是后来又发现没有那么麻烦,准备用一些比较高深的技术实现更好的效果。然后我也跟着百度了一下,确实不算太难,我也不知道用websocket之类的这种实时推送的,所以觉得就实现个简单的效果。当看到这篇文章的时候,如果用支持Web Notifications API的浏览器访问我的网站,就可以看到桌面通知了,还算可以,有些小问题以后修复吧。
桌面通知js部分代码完全参考web喵神的博客
1.修改functionphp
需要在模板的控制文件,function.php的function themeConfig($form) {}的方法里,添加以下代码:
$suportNotify= new Typecho_Widget_Helper_Form_Element_Radio('suportNotify',array('1' => _t('关闭桌面通知'),'2' => _t('开启桌面通知')),'1',_t('桌面通知'),_t("开启将可以设置桌面通知功能显示在首页,帮助你更好的推送内容"));
$form->addInput($suportNotify);
$Notifytitle = new Typecho_Widget_Helper_Form_Element_Text('Notifytitle', NULL, NULL, _t('桌面通知标题'), _t('填写指定桌面通知标题,将在通知弹窗显示。'));
$form->addInput($Notifytitle);
$Notifylink = new Typecho_Widget_Helper_Form_Element_Text('Notifylink', NULL, NULL, _t('桌面通知链接'), _t('填写指定桌面通知链接,点击通知栏后将跳转到所设置的路径。'));
$form->addInput($Notifylink);
$Notifypic = new Typecho_Widget_Helper_Form_Element_Text('Notifypic', NULL, NULL, _t('桌面通知图片'), _t('开启桌面通知后必填,设置指定桌面通知图片,在通知弹窗中显示缩略图。'));
$form->addInput($Notifypic);
保存之后,在typecho的模板设置里就会出现这三条表单内容,代表前期准备完成了。我这是已经设置好的,默认是空的,等你设置。
2.给模板添加代码
在设置之前,请注意之前添加的三个自定义字段,调用的方式如下:
<?php $this->options->suportNotify(); ?> //是否开启
<?php $this->options->Notifytitle(); ?> //通知标题
<?php $this->options->Notifylink(); ?> //通知跳转链接
<?php $this->options->Notifypic(); ?> //通知缩略图
如果你想全局显示就添加到模板的全局header.php中,但是我建议首页就好,因为这段js不怎么完善,弹来弹去也会让用户厌烦。
<?php if ($this->options->suportNotify == '2'): ?>
<!--桌面通知代码-->
<script>
window.onload = function () {
suportNotify()
}
//判断浏览器是否支持Web Notifications API
function suportNotify(){
if (window.Notification) {
console.log("支持"+"Web Notifications API");
showMess()
} else {
console.log("不支持 Web Notifications API");
}
}
//判断浏览器是否支持弹出实例
function showMess(){
setTimeout(function () {
console.log('1:'+Notification.permission);
if(window.Notification && Notification.permission !== "denied") {
//Notification.requestPermission这是一个静态方法,作用就是让浏览器出现是否允许通知的提示
Notification.requestPermission(function(status) {
console.log('2: '+status);
//如果状态是同意
if (status === "granted") {
var m = new Notification('收到信息', {
body: '<?php $this->options->Notifytitle(); ?>',
icon:"<?php $this->options->Notifypic(); ?>"
});
m.onclick = function () {
window.location.href="<?php $this->options->Notifylink(); ?>";
}
} else{
console.log('当前浏览器不支持弹出消息')
}
});
}
},1000)
}
</script>
<!--桌面通知代码结束-->
<?php endif; ?>
大概的意思就是,最外面的if判断值来显示是否开启,内部就是通用的js,在指定的区域填上调用字段,这样通知的功能就算弄完了,在电脑上可以访问我博客看效果,手机也有部分浏览器支持。
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.ruletree.club/archives/1019/
也显示啊。。。,是我弄错了?
@尘烟
这个教程比较久远了,而且现在都是采用webscoket,所以可能会有问题
@不暇
哈哈哈哈,更新一下
可是作用什么呢?文章更新或者评论也没有弹出提醒呀
@欧文斯
没啥作用啊,我做着玩的,想要更复杂的效果需要websocket
@不暇
比较鸡肋。这个给浏览器插件用体验会更好。
6666,保存了