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

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

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

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

код отправки, работает на настольном браузере, но не на мобильном телефоне:

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

2 ответов


попробуйте следующее:

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 Nightly (но еще не Firefox beta).

(том sw.js файл может быть просто нулевым байтовым файлом.)

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

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification has больше информация.

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BygptYClroM имеет информацию о том, почему Notification конструктор не поддерживается в Chrome на Android, хотя он все еще находится в настольном Chrome.


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

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

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

Uncaught 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