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

HTML5 Notification not working in Mobile Chrome

提问by Jorn

I'm using the HTML5 notification APIto notify the user in Chrome or Firefox. On desktop browsers, it works. However in Chrome 42 for Android, the permission is requested but the notification itself is not displayed.

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

The request code, works on all devices:

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

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

The sending code, works on desktop browser but not on mobile:

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

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

回答by sideshowbarker

Try the following:

请尝试以下操作：

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

That should work on Android both in Chrome and in Firefox (and on iOS in Safari, too).

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

(The sw.jsfile can just be a zero-byte file.)

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

One caveat is that you must run it from a secure origin (an httpsURL, not an httpURL).

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

See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification.

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

回答by Kalimah

Running this code:

运行此代码：

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

Console in Chrome DevTools shows this error:

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

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

未捕获的类型错误：无法构造“通知”：非法构造函数。改用 ServiceWorkerRegistration.showNotification()

A better approach might be:

更好的方法可能是：

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;  
}

Function Source: HTML5Rocks

函数来源：HTML5Rocks

回答by Ben

If you already have a service worker registered, use this:

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

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

回答by Jeff Bruce

I had no trouble with the Notification API on Windows Desktop. It even worked without issues on Mobile FF. I found documentation that seemed to indicate Chrome for Android was supported too, but it didn't work for me. I really wanted to prove the API could work for me on my current (2019) version of Chrome (70) for Android. After much investigation, I can easily see why many people have had mixed results. The answer above simply didn't work for me when I pasted it into a barebones page, but I discovered why. According to the Chrome debugger, the Notification API is only allowed in response to a user gesture. That means that you can't simply invoke the notification when the document loads. Rather, you have to invoke the code in response to user interactivity like a click.

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

So, here is a barebones and complete solution proving that you can get notifications to work on current (2019) Chrome for Android (Note: I used jQuery simply for brevity):

因此，这是一个准系统和完整的解决方案，证明您可以在当前（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>

In summary, the important things to know about notifications on current (2019) Chrome for Android:

总之，有关当前（2019 年）Android 版 Chrome 通知的重要事项：

1. Must be using HTTPS
2. Must use Notification API in response to user interactivity
3. Must use Notification API to request permission for notifications
4. Must use ServiceWorker API to trigger the actual notification

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