4

I am trying to make web notification, which is worked fine on firefox and microsoft edge. even it worked fine on safari. but it does not want to work on chrome. and it shows no error. this is my code:

    <script>
    window.setInterval(function(){notifyMe();}, 5000);
    function notifyMe() {
      if (!("Notification" in window)) {
        alert("This browser does not support desktop notification");
      } else if (Notification.permission === "granted") {
          var data = []
          data['title'] = "notification's title";
          data['body'] = "notification's body";
          var notification = new Notification(data['title'], {
            'body': data['body']
          });
          notification.onclick = function(event) {
            window.open('https://www.example.com/', '_blank');
          }
      } else if (Notification.permission !== "denied") {
        Notification.requestPermission().then(function (permission) {
          if (permission === "granted") {
            var notification = new Notification("really");
          }
        });
      }
    }
</script>
Cœur
  • 37,241
  • 25
  • 195
  • 267
Ehab Aboshehab
  • 63
  • 1
  • 3

3 Answers3

7

Is your website served using https:// - because Chrome has deprecated Notifications API on insecure (e.g. http://) origins

Otherwise, your code works just fine in Chrome

Bravo
  • 6,022
  • 1
  • 10
  • 15
  • This is why Chrome does not work - you should see an error in the console stating that Notifications API is deprecated - perhaps you're not looking in the right place. Developer Tools Console - usually can get to it by pressing F12 – Bravo Oct 24 '18 at 03:19
  • i know how to use the developer tools, but trust me there is no any error logs related to this issue in chrome. any way thank you so much when i pushed to production which it's serving https it worked on chrome. so yeah you are right. thank you so much – Ehab Aboshehab Oct 24 '18 at 03:27
  • OK, sorry for implying otherwise - I do get that warning in Chrome console - have you perhaps turned "Info level" off in the levels picker? – Bravo Oct 24 '18 at 03:38
  • I am encountering the same issue. Can you confirm that notifications can not be enabled in chrome for sites with http origin? – Tornike Shavishvili Jan 31 '20 at 07:59
0

web Notification

HTTPS (Chrome default mode)

localhost debug

HTTP

chrome://settings/content/notifications

https://pushassist.com/knowledgebase/how-to-enable-web-push-notifications-in-google-chrome-non-ssl-site/

  1. open chrome://flags/, then search notification

  2. enable notification

enter image description here

demo codes

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2019-08-17
 *
 * @description
 * @augments
 * @example
 * @link
 *
 */

let log = console.log;

const webNotificationApp = (debug = false) => {
    try {
        if ("Notification" in window) {
            // let ask = window.Notification.requestPermission();
            let ask = Notification.requestPermission();
            ask.then(
                // Permission
                (permission) => {
                    log(`permission =`, permission);
                    if (permission === "granted") {
                        log(`permission granted`);
                        let msg = new Notification("App Upgrade Info", {
                            body: "a new version app is available, click download: https://app.xgqfrms.xyz/download",
                            icon: "https://cdn.xgqfrms.xyz/logo/icon.png",
                        });
                        msg.addEventListener(`click`, (e) => {
                            let btn = e.target.dataset(`btn-type`);
                            if (btn === "ok") {
                                log(`OK`);
                            } else {
                                log(`Cancel`);
                            }
                            alert(`clicked notification`);
                        });
                    }else {
                        log(`notification permission is denied!`);
                    }
                }
            )
        } else {
            console.warn(`your browser is too old, which not support web notification!`);
        }
    } catch (err) {
        console.error(`error =`, err);
    }
};

document.addEventListener(`DOMContentLoaded`, () => {
    log(`DOMContentLoaded`);
    webNotificationApp();
});

// export default webNotificationApp;

// export {
//     webNotificationApp,
// };
xgqfrms
  • 10,077
  • 1
  • 69
  • 68
0

Check both your Chrome settings and OS settings (Mac/Windows) to make sure you have enabled/allowed notifications from Chrome.

This related answer has more details: Desktop Notification not appearing in Chrome

nanselm2
  • 1,397
  • 10
  • 11