Kevin Powell - Community•2y ago

JavaScript Desktop/Push Notification

Hello, i have a javascript that sends a desktop notification whenever i upload a picture on my website. But if someone else uploads a picture while i'm not on the website, i dont get a notification. ChatGPT told me i need a service worker that runs in the background. But i just have no idea at all how to do that. So i would really appreciate it if someone could help me out.

9 Replies

Tok124 (CSS Nerd)OP•2y ago

This is the code i currently have

if (!("Notification" in window)) {
  console.log("Desktop notifications not supported");
} else {
  Notification.requestPermission().then(function (permission) {
    if (permission === "granted") {
      var last_checked_photo_id = parseInt(localStorage.getItem("last_checked_photo_id")) || 0;

      function checkForNewPhotos() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "functions/notification.php?last_photo_id=" + last_checked_photo_id + "&_=" + Date.now());
        xhr.onload = function () {
          if (xhr.status === 200) {
            var photo_ids = xhr.responseText.split(",");
            if (photo_ids.length > 0) {
              var num_new_photos = 0;
              for (var i = 0; i < photo_ids.length; i++) {
                var photo_id = parseInt(photo_ids[i]);
                if (photo_id > last_checked_photo_id) {
                  num_new_photos++;
                  last_checked_photo_id = photo_id;
                }
              }
              if (num_new_photos > 0) {
                var message = num_new_photos + " new photo(s) were just uploaded!";
                if (num_new_photos === 1) {
                  message = "A new photo was just uploaded!";
                }
                var notification = new Notification(message, {
                  body: "Check out the latest additions to our gallery.",
                  icon: "images/profile.png",
                });
                localStorage.setItem("last_checked_photo_id", last_checked_photo_id);
              }
            }
          }
        };
        xhr.send();
      }

      checkForNewPhotos();
      setInterval(checkForNewPhotos, 5000);
    } else if (permission === "denied") {
      console.log("Permission for notifications denied");
    } else if (permission === "default") {
      console.log("Permission for notifications defaulted");
    }
  });
}

if (!("Notification" in window)) {
  console.log("Desktop notifications not supported");
} else {
  Notification.requestPermission().then(function (permission) {
    if (permission === "granted") {
      var last_checked_photo_id = parseInt(localStorage.getItem("last_checked_photo_id")) || 0;

      function checkForNewPhotos() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "functions/notification.php?last_photo_id=" + last_checked_photo_id + "&_=" + Date.now());
        xhr.onload = function () {
          if (xhr.status === 200) {
            var photo_ids = xhr.responseText.split(",");
            if (photo_ids.length > 0) {
              var num_new_photos = 0;
              for (var i = 0; i < photo_ids.length; i++) {
                var photo_id = parseInt(photo_ids[i]);
                if (photo_id > last_checked_photo_id) {
                  num_new_photos++;
                  last_checked_photo_id = photo_id;
                }
              }
              if (num_new_photos > 0) {
                var message = num_new_photos + " new photo(s) were just uploaded!";
                if (num_new_photos === 1) {
                  message = "A new photo was just uploaded!";
                }
                var notification = new Notification(message, {
                  body: "Check out the latest additions to our gallery.",
                  icon: "images/profile.png",
                });
                localStorage.setItem("last_checked_photo_id", last_checked_photo_id);
              }
            }
          }
        };
        xhr.send();
      }

      checkForNewPhotos();
      setInterval(checkForNewPhotos, 5000);
    } else if (permission === "denied") {
      console.log("Permission for notifications denied");
    } else if (permission === "default") {
      console.log("Permission for notifications defaulted");
    }
  });
}

bump, still need help

vince•2y ago

Hey this doesn't fix your issue but don't use var, use let or const. var is old syntax

Tok124 (CSS Nerd)OP•2y ago

Thanks, but yeah, i know this, i will fix it. But this code was generated by ChatGPT and you probably already know that ChatGPT loves to use var instead of let or const 😂

13eck•2y ago

ChatGPT loves to give wrong answers, so that’s probably why. I suggest reading the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Notification

Tok124 (CSS Nerd)OP•2y ago

Well, the notification system is working just fine. it's just that it cannot run in the background. and for this i need a service worker. I have also noticed that all websites with push notifications have a js file usually called sw.js and this is for the service worker. so yeah, it really seems like this is required to make javascript run in the background

13eck•2y ago

Yeah, main JS files don’t run when the tab is in the background. Service Workers aim to do that background stuff so that’d be the place to look.

Tok124 (CSS Nerd)OP•2y ago

Yeah. but it seems to be incredibly hard to make it or something, because i have asked in 3 different servers now and this is the only server where anyone have even replied :/ and everyone i asked about it has no idea how to do it

13eck•2y ago

I've not done anything with service workers yet, but this series might be able to help some: https://gomakethings.com/series/service-workers/

Tok124 (CSS Nerd)OP•2y ago

Okay thanks ! But yeah i am terrible at JavaScript, i only focus on CSS. but i will read it anyway, it cannot do any harm 🙂 and who knows, i may learn something new useful thing 😁 👍

Gaming

Programming

JavaScript Desktop/Push Notification