javascript - HTML5 Notification not working in Mobile Chrome

Question

I'm using the HTML5 notification API to 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.

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

question from:https://stackoverflow.com/questions/31512504/html5-notification-not-working-in-mobile-chrome

Answer 1

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).

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

One caveat is that you must run it from a secure origin (an https URL, not an http URL).

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