HTML5 通知在移动设备中不起作用 Chrome

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（以及 Safari 中的 iOS）。

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

需要注意的是，您必须运行来自安全来源（https URL，而不是 http URL）。

参见 https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration/showNotification。

Answer 2

运行此代码：

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

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

Uncaught TypeError: Failed to construct ‘Notification’: Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead

更好的方法可能是：

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 桌面上使用通知 API 没有问题。它甚至可以在 Mobile FF 上正常运行。我发现似乎也支持 Chrome for Android 的文档，但它对我不起作用。我真的很想证明 API 可以在我当前 (2019) 版本的 Chrome (70) for Android 上为我工作。经过大量调查，我很容易明白为什么很多人的结果好坏参半。当我将上面的答案粘贴到准系统页面时，上面的答案对我不起作用，但我发现了原因。根据 Chrome 调试器，仅允许通知 API 响应用户手势。这意味着您不能在文档加载时简单地调用通知。相反，您必须调用代码以响应用户交互（例如单击）。

因此，这是一个准系统和完整的解决方案，证明您可以在当前 (2019) Chrome 上为 Android 获取通知（注意：我使用 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>

总而言之，关于 Android 当前 (2019) Chrome 通知的重要事项：

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

Answer 4

如果您已经注册了 Service Worker，请使用：

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

Answer 5

new Notification('your arguments');
只有桌面浏览器支持这种创建通知的方式，移动浏览器不支持。根据下面的link。（向下滚动到兼容性部分）
https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API

对于移动浏览器，下面是您创建通知的方式（这也适用于桌面浏览器）

navigator.serviceWorker.ready.then( reg => { reg.showNotification("your arguments goes here")});

在使用 webkit 引擎的浏览器上测试。

欲了解更多信息，请访问下面的 links:
https://developers.google.com/web/updates/2015/05/notifying-you-of-changes-to-notifications https://developers.google.com/web/fundamentals/push-notifications/display-a-notification

HTML5 通知在移动设备中不起作用 Chrome

HTML5 Notification not working in Mobile Chrome

javascript

html

google-chrome

notifications

web-notifications