通知弹出窗口未显示在镶边中

Question

我正在尝试做一个类似gmail类型的桌面通知。我正面临着在chrome中更改通知权限的困难。如果我使用window.Notification.permission，权限总是显示在控制台中被拒绝。如果我手动更改权限在谷歌浏览器设置->隐私->内容设置->通知为"允许所有网站显示桌面通知"从"不允许任何网站显示桌面通知"。现在我可以正常收到桌面通知了。但我需要一个警报，询问权限，如果浏览器设置为"不允许任何网站显示桌面通知"，那么我需要选择允许从弹出，以改变设置为"允许所有网站显示桌面通知"。问题是，如果我这样做，即使权限警报没有到来，权限也不会改变。

后面是权限检查脚本

if(Notification.permission == 'denied'){
                 Notification.requestPermission(function (status){
                        console.log("Reaching here");
                        Notification.permission = status;
                     });
            }

没有弹出请求允许或不允许通知的权限。

Answer 1

您的脚本似乎有问题。

这是标准的一部分，当permission被设置为denied时，你永远不会显示弹出窗口，询问"你想允许…"发送桌面通知?"这个弹出框只在permission被设置为default的情况下使用，这实际上意味着用户不在乎，你应该问他是否想要它们。

这是我使用的条件:

Notification['permission'] !== 'granted' && Notification['permission'] !== 'denied'

因为并非所有浏览器都支持default值。加上permission属性在chrome 32之前没有实现，这就是为什么你应该使用方括号访问它。

事实上，你也可以删除denied部分在我的条件，因为它不会做任何事情，如果权限被拒绝。您可以参考此MDN文档以获取有关兼容性和类似内容的更多信息。

Answer 2

未打开对话框的问题是http。Chrome桌面通知只能在https协议下工作。

我遇到过这个问题，我花了很多时间来解决它。最后我找到了使用https的解决方案。

我在这里分享了代码，所以你可以在https上运行，它会工作得很好。

enter code here
       // request permission on page load
    document.addEventListener('DOMContentLoaded', function () {
      if (!Notification) {
        alert('Desktop notifications not available in your browser. Try Chromium.'); 
        return;
      }
      if (Notification.permission !== "granted")
        Notification.requestPermission();
    });
    function notifyMe() {
      if (Notification.permission !== "granted")
        Notification.requestPermission();
      else {
        var notification = new Notification('Notification title', {
          icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
          body: "Hey there! You've been notified!",
        });
        notification.onclick = function () {
          window.open("http://stackoverflow.com/a/13328397/1269037");      
        };
      }
    }
    notifyMe();
    Call notifyMe(); to show notification