Web notifications is not working on chrome, but it's working fine on firefox and microsoft edge

早过忘川 提交于 2021-02-08 09:15:45

问题


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>

回答1:


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




回答2:


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

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,
// };


来源:https://stackoverflow.com/questions/52960501/web-notifications-is-not-working-on-chrome-but-its-working-fine-on-firefox-and

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!