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

【问题标题】：HTML5 Notification not working in Mobile ChromeHTML5 通知在移动 Chrome 中不起作用
【发布时间】：2015-10-09 08:09:38
【问题描述】：

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

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

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

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

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

【问题讨论】：

我遇到了完全相同的问题。也试过window.webkitNotification。 推送通知，另一方面，工作但完全不同：developers.google.com/web/updates/2015/03/…（演示simple-push-demo.appspot.com）

标签： javascript html google-chrome notifications web-notifications

【解决方案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（以及 iOS 的 Safari）。

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

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

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

【讨论】：

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

【解决方案2】：

运行此代码：

 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

【讨论】：

太糟糕了，在不显示弹出窗口的情况下测试新通知似乎是不可能的。

【解决方案3】：

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

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

【讨论】：

有没有办法检查服务人员的现有权限？ if (Notification.permission === "granted") {...} 之类的东西？
实际上，您完全按照您的描述使用通知 API 检查现有权限。 Chrome for Android 的独特之处在于 Notification API 目前无法创建实际通知。但它确实可以检查权限和请求权限。获得权限后，您就可以使用 ServiceWorker API 来实际显示通知。
对我不起作用。 @Ben 对registrations[0] 的回答有效。
在 Ubuntu 桌面和 Android 上的 Chrome 中对我不起作用。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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 引擎的浏览器上测试。

【讨论】：