Question

我使用HTML5 notification API在Chrome或Firefox中通知用户。在桌面浏览器上，它可以工作。但是，在Chrome 42 for Android中，请求了权限，但未显示通知本身。

请求代码适用于所有设备：

if ('Notification' in window) {
  Notification.requestPermission();
}

发送代码适用于桌面浏览器，但不适用于移动设备：

if ('Notification' in window) {
  new Notification('Notify you');
}

Answer 1

尝试以下方法：

navigator.serviceWorker.register('sw.js');
Notification.requestPermission(function(result) {
  if (result === 'granted') {
    navigator.serviceWorker.ready.then(function(registration) {
      registration.showNotification('Notification with ServiceWorker');
    });
  }
});

这应该适用于Android的Chrome和Firefox Nightly（但还不适用于Firefox测试版）。

（sw.js文件只能是一个零字节文件。）

有一点需要注意，您必须从安全的来源（https网址，而不是http网址）运行它。

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification有更多信息。

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BygptYClroM详细说明了为什么Android上的Chrome不支持Notification构造函数，尽管它仍然在桌面Chrome中。

Answer 2

运行此代码：

 if ('Notification' in window) {
  Notification.requestPermission();
}

Chrome DevTools中的控制台显示以下错误：

未捕获的TypeError：无法构造“通知”：非法构造函数。请改用ServiceWorkerRegistration.showNotification（）

更好的方法可能是：

function isNewNotificationSupported() {  
    if (!window.Notification || !Notification.requestPermission)  
        return false;  
    if (Notification.permission == 'granted')  
        throw new Error('You must only call this \*before\* calling 
Notification.requestPermission(), otherwise this feature detect would bug the 
user with an actual notification!');  
    try {  
        new Notification('');  
    } catch (e) {  
        if (e.name == 'TypeError')  
            return false;  
    }  
    return true;  
}

功能来源：HTML5Rocks

Answer 3

我在Windows桌面上使用Notification API没问题。它甚至在Mobile FF上也没有问题。我发现似乎还表明支持Android版Chrome的文档，但对我而言不起作用。我真的想证明该API可以在我当前（2019）的Android版Chrome（70）版本上使用。经过大量调查，我很容易看到为什么很多人的结果参差不齐。当我将其粘贴到准系统页面上时，上面的答案对我根本不起作用，但我发现了原因。根据Chrome调试器的说法，仅在响应用户手势时才允许使用Notification API。这意味着您不能在文档加载时简单地调用通知。相反，您必须调用代码来响应用户的互动，例如单击。

因此，这是一个准系统和完整的解决方案，证明您可以在当前（2019年）的Android版Chrome浏览器上使用通知（注意：为简便起见，我仅使用jQuery）

<html>

<head>
<script type="text/javascript" src="libs/jquery/jquery-1.12.4.min.js"></script>
<script>

$( function()
{
    navigator.serviceWorker.register('sw.js');

    $( "#mynotify" ).click( function()
    {
        Notification.requestPermission().then( function( permission )
        {
            if ( permission != "granted" )
            {
                alert( "Notification failed!" );
                return;
            }

            navigator.serviceWorker.ready.then( function( registration )
            {
                registration.showNotification( "Hello world", { body:"Here is the body!" } );
            } );

        } );
    } );
} );

</script>

</head>

<body>
<input id="mynotify" type="button" value="Trigger Notification" />
</body>

</html>

总而言之，有关当前（2019年）Android版Chrome浏览器中的通知的重要重要信息：

必须使用HTTPS
必须使用Notification API来响应用户交互性
必须使用Notification API来请求通知权限
必须使用ServiceWorker API触发实际的通知

Answer 4

如果您已经注册了服务人员，请使用以下方法：

navigator.serviceWorker.getRegistrations().then(function(registrations) {
  registrations[0].showNotification(title, options);
});

HTML5通知无法在移动Chrome中使用

4 个答案: