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

IT技术 javascript html google-chrome notifications web-notifications
2021-02-20 14:54:44

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

请求代码,适用于所有设备:

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

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

if ('Notification' in window) {
  new Notification('Notify you');
}
5个回答

请尝试以下操作:

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

关于拥有更轻量级的解决方案(不需要 ServiceWorker),我建议花时间在github.com/whatwg/notifications/issues上提出问题人们非常希望从现实世界的 Web 开发人员那里得到反馈,根据我的经验,他们会对收到的反馈做出高度响应。但是如果没有任何人发送反馈,发生任何变化的可能性就会大大降低。
2021-04-22 14:54:44
我在哪里可以得到sw.js文件?
2021-05-05 14:54:44
这有效,但会创建一个具有自己生命周期的后台 ServiceWorker。我希望有一个更轻量级的解决方案,但好吧。感谢您的整个回答。
2021-05-08 14:54:44
嗨,我不断收到此错误消息:“失败:连接建立错误:net::ERR_SSL_PROTOCOL_ERROR”并且套接字对象创建显示为错误来源[websocket = new WebSocket("wss://www2.demo.domainname. com:45786/directory/socket.php");]45786 是我在非 ssl 版本中使用的端口号,它工作正常。用 443 替换它或完全取下它也没有任何作用。请问您有什么修复建议吗?
2021-05-12 14:54:44
建议的解决方案不会处理点击事件,但这可能与 Light API 在 Android 中不可用的原因相同。无法保证在单击通知时页面会存在(因为它可以在任何时候被内存管理器杀死),因此这将导致超级脆弱的 API。
2021-05-17 14:54:44

运行此代码:

 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

太糟糕了,似乎不可能在不显示弹出窗口的情况下测试新通知。
2021-05-02 14:54:44

如果您已经注册了 Service Worker,请使用以下命令:

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

我对 Windows 桌面上的通知 API 没有任何问题。它甚至在 Mobile FF 上也没有问题。我发现似乎也支持 Chrome for Android 的文档,但它对我不起作用。我真的很想证明 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 通知的重要事项:

  1. 必须使用 HTTPS
  2. 必须使用 Notification API 来响应用户交互
  3. 必须使用 Notification API 来请求通知权限
  4. 必须使用 ServiceWorker API 来触发实际通知
实际上,您完全按照您的描述使用 Notification API 检查现有权限。Chrome for Android 的独特之处在于 Notification API 目前无法创建实际的通知。但它确实可以检查权限和请求权限。一旦获得许可,您就可以使用 ServiceWorker API 来实际显示通知。
2021-05-06 14:54:44
在 Ubuntu 桌面和 Android 上的 Chrome 中对我不起作用。
2021-05-19 14:54:44
有没有办法检查 Service Worker 的现有权限?if (Notification.permission === "granted") {...}什么?
2021-05-20 14:54:44
没有为我工作。@Ben 的回答registrations[0]有效。
2021-05-21 14:54:44

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 /推送通知/显示通知