文章482
标签257
分类63

关于博客站内通知的一点思索

对的,你没看错!本博客最近添加了站内通知功能,由可爱的泡芙子给你通知本站最新的消息;本文就来讲解一下关于添加这个站内通知的一些思考;


关于博客站内通知的一点思索

添加站内通知的主要是想给进入博客的人一些友好的提示,并主动推送一些博客最近的更新情况或是比较有趣的内容,从而代替之前只能依靠读者自己主动寻找来获取信息的方式;

而这个想法最初是为了帮助我和朋友进行招聘信息的推送(对,你没看错,就是赤裸裸的打广告来的!)

下面跟随我的步骤,在你自己的博客添加一个站内通知吧!


通知组件选择&添加

在我看来,对于消息通知模块,比较重要的几点就是:

  • 用户体验:一定不要用傻傻的大弹窗!对于读者来说,最重要的是:老子是来看你写的文章的!不是来关弹窗的!
  • 样式选择:尽量选择和博客主题相符合的样式,并且尽量使用类似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)即可;


怎么样?是不是很简单?

那么也在自己的博客添加一个消息通知模块吧!




本文作者:Jasonkay
本文链接:https://jasonkayzk.github.io/2020/09/28/关于博客站内通知的一点思索/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可