在 localhost 上启用浏览器通知答案

【问题标题】：Enable browser notification on localhost在 localhost 上启用浏览器通知
【发布时间】：2017-12-29 00:27:13
【问题描述】：

当我使用 localhost 时如何启用浏览器通知，在控制台 Notification.requestPermission(); 中写入时，什么都不会出现，但在任何常规站点上，在控制台 Notification.requestPermission(); 中写入请求权限。

如何启用它来测试我的代码？非常感谢您提前...

【问题讨论】：

您好，欢迎来到 StackOverflow。请花一些时间阅读帮助页面，尤其是名为"What topics can I ask about here?" 和"What types of questions should I avoid asking?" 的部分。更重要的是，请阅读the Stack Overflow question checklist。您可能还想了解Minimal, Complete, and Verifiable Examples。
我无法重现该问题。也许您已经阻止了该来源的通知权限。
我没有被屏蔽我确定这一点
您需要在您的域上拥有 SSL，因此您无法在没有 SSL 的本地主机上执行此操作。您可以将其添加到 chrome 上的安全 url 列表中以使其正常工作。

标签： javascript browser localhost

【解决方案1】：

您的代码应该可以工作.. 可能是您错过了其他内容.. 请尝试此代码..

用法

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()
        }
    }
}

【讨论】：

【解决方案2】：

请检查浏览器版本是否支持通知，并尝试使用 http://{localhost ip} 而不是 localhost/xyz。

【讨论】：

它可以工作，但我面临另一个问题，顺便说一句，为什么它使用 localhost IP 而不是域名？谢谢
问题出在设置上，一直是允许的，改为先问但真的谢谢你，如果能回答我上面的问题，我很感激
我不知道为什么这个答案被降级，因为这是正确的答案 - 你需要使用 IP 例如127.0.0.1 而不是 localhost。它也让我很沮丧，直到我仔细考虑并检查。
在下面查看我的建议如何编辑UserNotificationPermissions.plist

【解决方案3】：

在 ubuntu 中，你应该这样运行 chrome 实例

whereis google-chrome 查找您的可执行文件

/usr/bin/google-chrome --unsafely-treat-insecure-origin-as-secure=http://your-domain.dev:80

记得在执行此操作之前关闭所有其他 chrome 实例（pkill -9 chrome）

【讨论】：

【解决方案4】：

在 MacOS 上，您可以在 ~/Library/Safari 中编辑 UserNotificationPermissions.plist。你可以在 sudo 中使用 Xcode

sudo /Applications/Xcode.app/Contents/MacOS/Xcode

打开文件（使用CMD+SHIFT+.显示隐藏文件夹/文件）使用localhost 或其他任何内容在此处复制或创建新项目

【讨论】：

【解决方案5】：

TypeScript 的一个好的实现可能是

  export const browserNotification = (title: string, body: string = "", options = {}) => {
    try {
      if (typeof window === "undefined" || !Notification) {
        return;
      }

      Notification.requestPermission().then(permission => {
        if (permission === "granted") {
          new Notification(title, { ...options, body });
        }
      });
    } catch (error) {
      // Safari doesn't return a promise for requestPermissions and it
      // throws a TypeError. It takes a callback as the first argument
      // instead.
      if (error instanceof TypeError) {
        Notification.requestPermission(() => {
          new Notification(title, { ...options, body });
        });
      } else {
        throw error;
      }
    }
  };

【讨论】：