Question

我正在使用浏览器通知，因为它不适用于我想要检查我的JS代码的每个浏览器（如果可用）。我查看了mozilla开发人员部分：https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API

他们告诉我应该使用此代码检查浏览器是否有通知支持：

  if (!("Notification" in window)) {
    alert("This browser does not support system notifications");
  }

现在我将该代码复制到我的网站中：通知仍然可以在之前使用的浏览器中运行，但它会阻止其他代码的执行（就像在检查＆＃39; -code之前一样）。 / p>

例如：在边缘浏览器中，我收到控制台错误：

＆＃39;通知未定义＆＃39;

那么您检查浏览器是否具有通知功能的首选方法是什么？

Answer 1

以下代码将检查浏览器是否与Web通知API兼容

$http()

Answer 2

您还应该检查前缀版本：

var NotificationIsSupported = !!(window.Notification /* W3C Specification */ || window.webkitNotifications /* old WebKit Browsers */ || navigator.mozNotification /* Firefox for Android and Firefox OS */)

您可以在this article中详细了解如何执行此操作。本文还有很多关于如何支持其他设备的代码示例。

Answer 3

请尝试使用此代码以便于通知实施。

用法

sendNotification({
  title: 'New Notification',
  message: 'Your message goes here',
  icon:'https://cdn2.iconfinder.com/data/icons/mixed-rounded-flat-icon/512/megaphone-64.png',
  clickCallback: function () {
    alert('do something when clicked on notification');
  }
});

功能

function sendNotification (data) {
    if (data == undefined || !data) { return false }
    var title = (data.title === undefined) ? 'Notification' : data.title
    var clickCallback = data.clickCallback
    var message = (data.message === undefined) ? 'null' : data.message
    var icon = (data.icon === undefined) ? 'https://cdn2.iconfinder.com/data/icons/mixed-rounded-flat-icon/512/megaphone-64.png' : data.icon
    var sendNotification = function (){
        var notification = new Notification(title, {
            icon: icon,
            body: message
        })
        if (clickCallback !== undefined) {
            notification.onclick = function () {
                clickCallback()
                notification.close()
            }
        }
    }

    if (!window.Notification) {
        return false
    } else {
        if (Notification.permission === 'default') {
            Notification.requestPermission(function (p) {
                if (p !== 'denied') {
                    sendNotification()
                }
            })
        } else {
            sendNotification()
        }
    }
}

检查浏览器通知是否可用

3 个答案:

用法

功能