[英]HTML5 Notification not working in Mobile Chrome
我正在使用HTML5 通知 API在 Chrome 或 Firefox 中通知用户。 在桌面浏览器上，它可以工作。 但是在 Android 的 Chrome 42 中，请求了权限，但不显示通知本身。
请求代码适用于所有设备：
if ('Notification' in window) {
Notification.requestPermission();
}
发送代码适用于桌面浏览器，但不适用于移动设备：
if ('Notification' in window) {
new Notification('Notify you');
}
请尝试以下方法：
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/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification 。
运行此代码：
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
我在Windows桌面上使用Notification API没有遇到任何问题。 它甚至在Mobile FF上没有问题。 我发现文档似乎表明Chrome for Android也受支持，但它对我不起作用。 我真的想证明API可以在我目前的（2019）版Chrome（70）for Android上使用。 经过多次调查，我很容易看出为什么很多人的结果好坏参半。 当我将它粘贴到准系统页面时，上面的答案对我来说根本不起作用，但我发现了原因。 根据Chrome调试程序，仅允许Notification API响应用户手势。 这意味着您无法在文档加载时简单地调用通知。 相反，您必须调用代码以响应用户交互，如点击。
所以，这里有一个准系统和完整的解决方案，证明你可以获得通知工作当前（2019）Chrome for 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>
总之，关于当前（2019）Chrome for Android的通知需要了解的重要事项：
如果您已经注册了服务工作者，请使用以下命令：
navigator.serviceWorker.getRegistrations().then(function(registrations) {
registrations[0].showNotification(title, options);
});
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/push-notifications/display-a -通知
移动 Android Chrome 无法与 HTML5 和 CREATEJS 配合使用 - 冻结问题
[英]Mobile Android Chrome not working great with HTML5 and CREATEJS - freezing issues
Chrome Mobile上的带有Service Workers的HTML5通知不起作用
[英]HTML5 Notifications with Service Workers on Chrome Mobile not working
javascript和jQuery在Chrome android html5上不起作用
[英]javascript and jquery not working on chrome android html5
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.