Уведомление HTML5 не работает в Mobile Chrome

Я использую API уведомлений HTML5, чтобы уведомить пользователя в Chrome или Firefox. В настольных браузерах он работает. Однако в Chrome 42 для Android запрашивается разрешение, но само уведомление не отображается.

Код запроса работает на всех устройствах:

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

Отправляющий код работает на настольном браузере, но не на мобильном устройстве:

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

Ответы

Ответ 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 может быть просто нулевым байтом.)

Одно предостережение: вы должны запускать его из безопасного источника (URL-адрес https, а не http адрес http).

См. Https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification.

Ответ 2

Запуск этого кода:

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

Консоль в Chrome DevTools показывает эту ошибку:

Неподготовлено TypeError: Не удалось создать сообщение "Notify: Illegal конструктор. Вместо этого используйте 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

У меня не было проблем с API уведомлений на рабочем столе Windows. Это даже работало без проблем на Mobile FF. Я нашел документацию, которая, казалось, указывала, что Chrome для Android тоже поддерживается, но у меня это не сработало. Я действительно хотел доказать, что API может работать на моей текущей (2019) версии Chrome (70) для Android. После долгих исследований я легко могу понять, почему у многих людей были смешанные результаты. Ответ выше просто не работал для меня, когда я вставил его на страницу, но я понял, почему. Согласно отладчику Chrome, API уведомлений разрешен только в ответ на жест пользователя. Это означает, что вы не можете просто вызвать уведомление при загрузке документа. Скорее, вы должны вызывать код в ответ на интерактивность пользователя, как щелчок.

Итак, вот базовое и законченное решение, доказывающее, что вы можете получать уведомления для работы на текущем (2019) Chrome для 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 для Android:

  1. Должно быть использование HTTPS
  2. Необходимо использовать API уведомлений в ответ на интерактивность пользователя
  3. Необходимо использовать API уведомлений, чтобы запросить разрешение на уведомления
  4. Необходимо использовать API ServiceWorker, чтобы вызвать фактическое уведомление

Ответ 4

Если у вас уже зарегистрирован сервисный работник, используйте это:

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