42

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

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

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

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

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

5 回答 5

58

尝试以下操作：

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

这应该适用于 Chrome 和 Firefox 中的 Android（以及 Safari 中的 iOS）。

（该sw.js文件可以只是一个零字节文件。）

一个警告是您必须从安全的来源（httpsURL，而不是httpURL）运行它。

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

于 2015-08-03T12:56:44.257 回答
4

如果您已经注册了 service worker，请使用：

navigator.serviceWorker.getRegistrations().then(function(registrations) {
  registrations[0].showNotification(title, options);
});
于 2019-01-29T23:45:00.310 回答
4

运行此代码：

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

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

未捕获的类型错误：无法构造“通知”：非法构造函数。改用 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

于 2015-08-05T23:53:19.453 回答
2

Windows 桌面上的通知 API 没有问题。它甚至在 Mobile FF 上也没有问题。我发现似乎也支持 Chrome for Android 的文档，但它对我不起作用。我真的很想证明 API 可以在我当前 (2019) 版本的 Android 版 Chrome (70) 上为我工作。经过大量调查，我很容易看出为什么很多人的结果好坏参半。当我将上面的答案粘贴到准系统页面时，上面的答案对我根本不起作用，但我发现了原因。根据 Chrome 调试器，通知 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 上的通知的重要信息：

  1. 必须使用 HTTPS
  2. 必须使用通知 API 来响应用户交互
  3. 必须使用通知 API 请求通知权限
  4. 必须使用 ServiceWorker API 来触发实际通知
于 2019-01-16T21:44:05.780 回答
1

new Notification('your arguments');
仅桌面浏览器支持这种创建通知的方式，移动浏览器不支持。根据下面的链接。（向下滚动到兼容性部分）
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 引擎的浏览器上测试。

有关更多信息，请访问以下链接：
https ://developers.google.com/web/updates/2015/05/notifying-you-of-changes-to-notifications https://developers.google.com/web/fundamentals /推送通知/显示通知

于 2021-08-30T10:32:02.737 回答