Question

我无法在所有网络浏览器和移动浏览器中使用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

Answer 1

通知被更改为仅可通过推送事件在Android上的服务工作者中使用。

在推送活动中，您无法使用new Notification()发出通知，而是需要在服务工作人员中执行以下操作：

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

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

获取HTML5推送通知是否适用于所有Web浏览器和移动浏览器？

1 个答案: