对的,你没看错!本博客最近添加了站内通知功能,由可爱的泡芙子给你通知本站最新的消息;本文就来讲解一下关于添加这个站内通知的一些思考;
关于博客站内通知的一点思索
添加站内通知的主要是想给进入博客的人一些友好的提示,并主动推送一些博客最近的更新情况或是比较有趣的内容,从而代替之前只能依靠读者自己主动寻找来获取信息的方式;
而这个想法最初是为了帮助我和朋友进行招聘信息的推送(对,你没看错,就是赤裸裸的打广告来的!)
下面跟随我的步骤,在你自己的博客添加一个站内通知吧!
通知组件选择&添加
在我看来,对于消息通知模块,比较重要的几点就是:
- 用户体验:一定不要用傻傻的大弹窗!对于读者来说,最重要的是:
老子是来看你写的文章的!不是来关弹窗的!
- 样式选择:尽量选择和博客主题相符合的样式,并且尽量使用类似APP通知的方式进行消息的推送;
- 可定制化:应当包括内容、图标、定时关闭等基本功能;
- 使用足够简单:最好是开箱即用!本身我是做后端开发的,如果引入一个比较复杂的模块,可能使用起来还要琢磨一下;
经过参考,最终选择了下面的通知组件:
https://www.jq22.com/yanshi7942
通知模块的添加比较简单,在页面引入对应的js和css,然后调用其Notification.create
方法即可,例如:
Notification.create(
// Title
"资源下载⚡",
// Text
"传送门:<BR/><a href='https://jasonkayzk.github.io/sharing/'>文件分享</a>",
// Illustration
"/images/avatar4.jpg",
// Effect
'fadeInRight',
// Position 1, 2, 3, 4
position,
closeTime
)
多次通知问题
添加的通知模块有一个比较影响体验的地方:每次刷新或是跳转都会重新推送一遍通知
为了保证每个用户进入网站后(在关闭标签之前)只会被通知一次,我们可以使用sessionStorage在当前用户的会话中存储一个通知的标志位:
从而读者仅会在首次进入后会被通知,此后,只要在站内跳转都不会再通知了;
实现的代码很简单,类似于下面的JS:
(function once() {
if (sessionStorage.getItem('load') == null) {
// 通知事件
notifyFunc();
sessionStorage.setItem('load', false);
} else {
return;
}
})();
用户首次进入的时候,load变量值是空的,此时我们进行通知,同时将值设为false(其他值保证不为null)即可;
怎么样?是不是很简单?
那么也在自己的博客添加一个消息通知模块吧!