Browser notifications

5 posters

Go down

Browser notifications Empty Browser notifications

Post by Mihai June 6th 2021, 1:18 am

Hi all,

The feature in this topic allows you to display notifications in the browser. For proper functioning, the browser must allow cookies and javascript, and the forum must have an SSL certificate.

Google has announced that as of September this year, the notifications API will no longer be functional for sites that do not have an active SSL certificate.

Demonstration

Browser notifications Show10
Browser notifications Header11

Installation


To install this feature go to:
Panel > Modules > HTML & JAVASCRIPT > Javascript code management > Create a new JavaScript code

Fill in the fields with:

  • Title: Browser notifications
  • Location: All Pages
  • Code:
    Code:
    $(function() {
      
        if (navigator.cookieEnabled !== true) return;
      
        var config = {
            notif_comm: false,
            forum_name: "Forumul forumurilor",
            forum_icon: "https://2img.net/r/frmste/images/sigle.png",
            recheck: 120,
            debug: false,
            lang: "ro", // "eng" or "ro"
            margin_top: 30,
            limit: 4,
            forums: [45, 43, 44]
        };
      
        config.forums = shuffle(config.forums);
     
      
        switch (config.lang) {
            case "ro":
                $lang = {
                    request_permission : "%s doreste sa va afiseze notificari",
                    allow : "Permite",
                    notallow : "Nu, multumesc"
                };
            break;
          
            case "eng":
                $lang = {
                    request_permission : "%s wants to show notifications",
                    allow : "Allow",
                    notallow : "No, thank you"
                };
            break;
        }  


        function sentNotif() {
            if (Notification.permission !== "granted") {
                if(getCookie("notif_allow") !== "") return;
                requestPermissions();
            } else if (navigator.cookieEnabled === true) {
                setCookie("notif_allow", true, 365);
              
                if (getCookie("notif_push_forum_" + config.forums[0]) !== "") {
                  
                    $posts = shuffle(JSON.parse(getCookie("notif_push_forum_" + config.forums[0])));

                    if (getCookie("notif_push_topics").indexOf($posts[0].topic_id) > -1) return;
                  
                    if (getCookie("notif_count") >= config.limit) return;
                  
                    if (getCookie("notif_wait") === "1") return;
                  
                    setCookie("notif_wait", "1", "", 3);
                  
                    viewTopic($posts[0].topic_id);

                    var notification = new Notification(config.forum_name, {
                        icon: config.forum_icon,
                        body: $posts[0].topic_title
                    });

                    notification.onclick = function() {
                        window.open($posts[0].topic_link);
                        window.focus();
                    };
                  
                    notifCount();
                }
            }
        }
      
        function notifCount() {
            if(getCookie("notif_count") === "") {
                setCookie("notif_count", 1, 1);
            } else {
                setCookie("notif_count", (Number(getCookie("notif_count") ) + 1), 1);
            }
        }

        function viewTopic($topic_id) {
            if ($topic_id === null || $topic_id === "") return;
            $seen = [];
            if (getCookie("notif_push_topics") === "") {
                $seen = [$topic_id];
                setCookie("notif_push_topics", JSON.stringify($seen), 30);
                if (config.debug === true) {
                    console.log("[DEBUG] The cookie \"notif_push_topics\" has been created");
                    console.log($seen);
                }
            } else {
                if ($.inArray($topic_id, JSON.parse(getCookie("notif_push_topics"))) === -1) {
                    setCookie("notif_push_topics", JSON.stringify(JSON.parse(getCookie("notif_push_topics")).concat($topic_id)), 30);
                    if (config.debug === true) {
                        console.log("[DEBUG] The cookie \"notif_push_topics\" has been updated");
                        console.log(JSON.parse(getCookie("notif_push_topics")));
                    }
                } else {
                    if (config.debug === true) {
                        console.log("[DEBUG] The cookie \"notif_push_topics\" is already the value " + $topic_id);
                        console.log(JSON.parse(getCookie("notif_push_topics")));
                    }
                }
            }
        }

        function requestPermissions() {
          
            if (getCookie("notif_allow") === "false") return;
          
            $("head").append('<style>.mondal_notif{position:fixed;top:' + config.margin_top + 'px;margin:0 auto;width:100%;}.mondal_notif > .container_notif{width:600px;background:#fff;box-shadow:0 0 20px rgba(0,0,0,0.3);padding:10px;text-align:center;margin:0 auto;border:1px solid #d7d7d7;margin-top:-1px}.mondal_notif > .container_notif p{font-size:16px}.mondal_notif [name="allow"],.mondal_notif [name="notallow"]{background:#39c;padding:10px;cursor:pointer;margin-right:20px;border:0;color:#fff;font-weight:400;text-transform:uppercase}.mondal_notif [name="notallow"]{background:#adadad}</style');
          
            $("body").append('  <div class="mondal_notif">' +
                                    '<div class="container_notif">' +
                                        '<p>' + $lang.request_permission.replace("%s", config.forum_name) + '</p>' +
                                        '<div class="buttons_notif">' +
                                            '<button name="allow" class="allownotif">' + $lang.allow + '</button>' +
                                            '<button name="notallow"  class="notallownotif">' + $lang.notallow + '</button>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>');
                              
            $('.allownotif').on( "click", function() {
                setCookie("notif_allow", true, 7);
                Notification.requestPermission();
                $(".mondal_notif").hide();
            });
      
            $('.notallownotif').on( "click", function() {
                setCookie("notif_allow", false, 7);
                $(".mondal_notif").hide();
            });                    
                              
        }

        function reloadData() {
            for (var x = 0; x < config.forums.length; x++) {
                $id = config.forums[x];
                $.get("/feed/?f=" + $id).done(function(data) {
                    $id = config.forums[x];
                    $object = [];
                    $xml = $(data);
                    if (getCookie("notif_push_topics") === "" || getCookie("notif_push_topics") === null) {
                        setCookie("notif_push_topics", JSON.stringify([]), 30);
                    }
                    for (var i = 0; i < $xml.find("item").length; i++) {
                        if (checkDate(new Date(new Date().getTime() + -1 * 24 * 60 * 60 * 1000), $xml.find("item").find("pubDate")[i].textContent, $xml.find("item").find("pubDate")[i].textContent) && JSON.parse(getCookie("notif_push_topics")).indexOf($xml.find("item").find("link")[i].textContent.replace(/[^0-9]+/g, "")) === -1) {
                            $object.push({
                                topic_id: $xml.find("item").find("link")[i].textContent.replace(/[^0-9]+/g, ""),
                                topic_title: $xml.find("item").find("title")[i].textContent,
                                topic_date: $xml.find("item").find("pubDate")[i].textContent,
                                topic_link: $xml.find("item").find("link")[i].textContent,
                                forum_id: $xml.find("image").find("link").text().replace(/[^0-9]+/g, ""),
                                comment_id: $xml.find("item").find("comments")[i].textContent.replace(/[^0-9]+/g, ""),
                                forum_name: $xml.find("image").find("title").text()
                            });
                        }
                    }
                    if (!isEmpty($object)) {
                        $cookie_name = "notif_push_forum_" + $xml.find("image").find("link").text().replace(/[^0-9]+/g, "");
                        if (getCookie($cookie_name) === "" || getCookie($cookie_name) !== JSON.stringify($object)) {
                            if (config.debug === true) {
                                console.log("[DEBUG] The cookie \"" + $cookie_name + "\" has been saved/updated");
                                console.log($object);
                            }
                            setCookie($cookie_name, JSON.stringify($object), 30);
                        }
                    }
                });
            }
        }

        function shuffle(array) {
            var currentIndex = array.length,
                temporaryValue, randomIndex;
            while (0 !== currentIndex) {
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;
                temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }
            return array;
        }

        function checkDate(from, to, check) {
            var fDate = Date.parse(from),
                lDate = Date.parse(to),
                cDate = Date.parse(check);
            if ((cDate <= lDate && cDate >= fDate)) {
                return true;
            }
            return false;
        }

        function isEmpty(obj) {
            for (var key in obj) {
                if (obj.hasOwnProperty(key))
                    return false;
            }
            return true;
        }


        function setCookie(cname, cvalue, exdays, exmins) {
            var d = new Date();
            if(exdays === "") {
                d.setTime(d.getTime() + (exmins * 60 * 1000));
            } else {
                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            }
            var expires = "expires=" + d.toGMTString();
            document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
        }

        function getCookie(cname) {
            var name = cname + "=";
            var decodedCookie = decodeURIComponent(document.cookie);
            var ca = decodedCookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) === ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) === 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }

        setTimeout(function() {
            reloadData();
            sentNotif();
        }, (config.recheck * 1000));


        window.onload = function() {
            reloadData();
            sentNotif();
        };

    });


In the variable config there are other variables that allow customization

  • forum_name - the name of the forum
  • forum_icon - the icon to display in the notification
  • recheck - time interval in seconds to re-notify notifications.
  • debug - developer mode (allows true or
  • false)
  • lang - default language (available values: eng or
  • ro)
  • margin_top - pixel distance of the pop-up from the antenna
  • limit - notification limit to be displayed within 24 hours
  • forums - Desired forum IDs
Mihai
Mihai
Forumember

Male Posts : 302
Reputation : 17
Language : Romanian, English
Location : Bucharest, Romania

View user profile https://help.forumgratuit.ro/

SLGray and TonnyKamper like this post

Back to top Go down

Browser notifications Empty Re: Browser notifications

Post by SLGray June 6th 2021, 5:22 am

If you are going to share tips & tricks on this support forum, please make sure all information is in English including screenshots.


Browser notifications Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 49361
Reputation : 3434
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

SarkZKalie and Neptune- like this post

Back to top Go down

Browser notifications Empty Re: Browser notifications

Post by YoshiGM June 6th 2021, 8:19 pm

What is the meaning of this if we have PWA? scratch
YoshiGM
YoshiGM
Active Poster

Male Posts : 1105
Reputation : 132
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

Back to top Go down

Browser notifications Empty Re: Browser notifications

Post by Mihai June 6th 2021, 11:35 pm

@SLGray wrote:If you are going to share tips & tricks on this support forum, please make sure all information is in English including screenshots.
Hello,

the tutorial was made in romanian language, from this topic (tutorial since 2017)

about the code, its translated already: romanian/english Razz
Mihai
Mihai
Forumember

Male Posts : 302
Reputation : 17
Language : Romanian, English
Location : Bucharest, Romania

View user profile https://help.forumgratuit.ro/

Back to top Go down

Browser notifications Empty Re: Browser notifications

Post by skouliki June 7th 2021, 8:03 am

i think you must include the person who wrote each code on your threads
also I do agree with YoshiGM that code was written in 2017 but since 2019 we have PWA which is much better
skouliki
skouliki
Manager
Manager

Female Posts : 11262
Reputation : 1403
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

Browser notifications Empty Re: Browser notifications

Post by jucarese June 7th 2021, 10:51 am

Also, no JS is needed for notifications, all Forumotion forums already have the SSL certificate installed as standard so the push notifications will come without problem, except that any user deactivates it.
jucarese
jucarese
Active Poster

Male Posts : 1899
Reputation : 75
Language : spanish
Location : SSF Admin

View user profile http://asistencia.foroactivo.com/u23082

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum