让 HTML5 推送通知适用于所有 Web 浏览器和移动浏览器?

Posted

技术标签:

【中文标题】让 HTML5 推送通知适用于所有 Web 浏览器和移动浏览器?【英文标题】:Getting HTML5 push notifications to work across all web browsers and mobile browsers? 【发布时间】:2017-02-13 11:25:44 【问题描述】:

我无法让 html5 推送通知在所有网络浏览器和移动浏览器上工作。目前,我有以下代码:

<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', function () 
  if (Notification.permission !== "granted")
    Notification.requestPermission();
);

function notifyMe() 
  if (!Notification) 
    alert('Desktop notifications not available in your browser.'); 
    return;
  

  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else 
    var notification = new Notification('Notification title', 
      icon: 'https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
      body: "Hey there! You've been notified!",
    );

    notification.onclick = function () 
        window.open("https://www.google.com");      
    ;

  


</script>
</head>
<body>

<a href="javascript://" onclick="setTimeout(function() notifyMe(); , 1500);" style="font-size:50px;background:#000;color:#fff;">Test nofitications (Will load in 1.5 seconds)</a>

</body>
</html>

当我尝试通过 Chrome 在我的 android 手机上使用代码时,它会请求许可,但实际通知不起作用。

有什么想法吗?

编辑:

尝试了以下方法,但没有成功:

http://www.girliemac.com/html5-notifications-webOS-style/
http://elfoxero.github.io/html5notifications/
http://codepen.io/imprakash/pen/ZYLayY
https://www.daftlogic.com/sandbox-using-html5-notifications.htm
https://davidwalsh.name/demo/notifications-api.php
http://ttsvetko.github.io/HTML5-Desktop-Notifications/
http://jsfiddle.net/Semmel/kY3Cq/
https://gauntface.github.io/simple-push-demo/
https://github.com/alexgibson/notify.js/blob/master/example/index.html

【问题讨论】:

您可以尝试使用 Chrome 开发工具通过桌面调试手机上的行为,并检查console 上是否有任何错误。 【参考方案1】:

通知已更改为只能通过推送事件在 Android 上的 Service Worker 中使用。

在推送事件中,您不能使用new Notification() 发出通知,而是需要在服务工作者中执行以下操作:

self.addEventListener('push', (event) => 
  event.waitUntil(self.registration.showNotification('Title', 
    body: 'Hello, World'
  ));
);

有关推送通知的更多信息:https://web-push-book.gauntface.com/

【讨论】:

以上是关于让 HTML5 推送通知适用于所有 Web 浏览器和移动浏览器?的主要内容,如果未能解决你的问题,请参考以下文章

适用于 Web 应用程序的 AWS 推送通知服务

适用于 chrome、firefox 和 safari 浏览器的 Azure 浏览器推送通知

Pushsharp 推送通知仅适用于沙盒,不适用于生产

AWS Mobile推送通知示例

Apple 推送通知仅适用于开发,不适用于生产

适用于 Android 的位置感知推送通知