22

Ich verwende die HTML5 notification API, um den Benutzer in Chrome oder Firefox zu benachrichtigen. Auf Desktop-Browsern funktioniert es. In Chrome 42 für Android wird die Berechtigung angefordert, die Benachrichtigung selbst wird jedoch nicht angezeigt.HTML5-Benachrichtigung funktioniert nicht in Mobile Chrome

Die Code-Abfrage, funktioniert auf allen Geräten:

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

Der sendende Code, Browser funktioniert auf dem Desktop, aber nicht auf Mobil:

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

Ich habe das genau gleiches Problem. Habe auch 'window.webkitNotification' versucht. * Push-Benachrichtigungen *, auf der anderen Seite, arbeiten, aber sind ein anderes Tier insgesamt: https://developers.google.com/web/updates/2015/03/push-notificatons-on-the-open-ates?hl= en (demo https://simple-push-demo.appspot.com/) – BoppreH

Antwort

29

Versuchen Sie Folgendes:

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

Das sollte bei Android sowohl in Chrome als auch in Firefox Nightly funktionieren (aber noch nicht Firefox-Beta).

(Die sw.js Datei kann nur eine Null-Byte-Datei sein.)

Ein Nachteil ist, dass man es von einem sicheren Herkunfts ausgeführt werden muss (eine https URL, keine http URL).

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification hat weitere Informationen.

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BygptYClroM hat Informationen darüber, warum der Notification Konstruktor in Chrome auf Android nicht unterstützt wird, obwohl es noch in Desktop Chrome ist.

+1

Dies funktioniert, aber erstellt einen Hintergrund ServiceWorker mit einem eigenen Lebenszyklus. Ich wünschte, es gäbe eine leichtere Lösung, aber naja. Danke für die durchgehende Antwort. – BoppreH

+3

In Bezug auf eine leichtere Lösung (die ServiceWorker nicht erfordert), empfehle ich Zeit zu nehmen, um ein Problem auf https://github.com/whatwg/notifications/issues zu melden. Die Leute wollen sehr viel Feedback von realen Web-Entwicklern, und nach meiner Erfahrung reagieren sie sehr auf Feedback, das sie bekommen. Aber ohne dass jemand Feedback sendet, ist es viel weniger wahrscheinlich, dass sich etwas ändern wird. – sideshowbarker

+5

Die vorgeschlagene Lösung wird keine Click-Ereignisse verarbeiten, was wahrscheinlich der gleiche Grund ist, warum die Light-API in Android nicht verfügbar ist. Es gibt keine Garantie dafür, dass die Seite zum Zeitpunkt des Klickens der Benachrichtigung vorhanden ist (da sie jederzeit vom Speichermanager gelöscht werden kann), so dass dies zu einer superflockigen API führen würde. –

2

Ausführen dieses Code:

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

Konsole in Chrome DevTools zeigt dieser Fehler:

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

Ein besserer Ansatz sein könnte:

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

Funktion Quelle: HTML5Rocks

Verwandte Themen