it-swarm.com.de

HTML5-Benachrichtigung funktioniert nicht in Mobile Chrome

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

Der Anforderungscode funktioniert auf allen Geräten:

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

Der Sendecode funktioniert mit dem Desktop-Browser, nicht jedoch mit dem Handy:

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

Versuche 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 auf Android sowohl in Chrome als auch in Firefox Nightly (aber noch nicht Firefox-Beta) funktionieren.

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

Ein Nachteil ist, dass Sie es von einem sicheren Ursprung aus ausführen müssen (eine https-URL und keine http-URL).

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

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

34
sideshowbarker

Diesen Code ausführen:

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

Console in Chrome DevTools zeigt diesen Fehler an: 

Nicht abgerufener TypeError: Fehler beim Erstellen von "Benachrichtigung": Illegal Konstrukteur. Verwenden Sie stattdessen ServiceWorkerRegistration.showNotification ()

Ein besserer Ansatz könnte sein:

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

Funktionsquelle: HTML5Rocks

3
Kalimah Apps

Ich hatte keine Probleme mit der Benachrichtigungs-API auf Windows Desktop. Es hat sogar ohne Probleme mit Mobile FF funktioniert. Ich fand eine Dokumentation, die anscheinend darauf hinweist, dass Chrome für Android ebenfalls unterstützt wurde, aber es funktionierte nicht für mich. Ich wollte wirklich beweisen, dass die API für meine aktuelle (2019) Version von Chrome (70) für Android funktionieren kann. Nach langen Nachforschungen kann ich leicht erkennen, warum viele Menschen gemischte Ergebnisse hatten. Die Antwort oben funktionierte für mich einfach nicht, als ich sie in eine Barebones-Seite einfügte, aber ich entdeckte warum. Laut dem Chrome-Debugger ist die Benachrichtigungs-API nur als Reaktion auf eine Benutzergeste zulässig. Das bedeutet, dass Sie die Benachrichtigung nicht einfach beim Laden des Dokuments aufrufen können. Stattdessen müssen Sie den Code als Reaktion auf Benutzerinteraktivität wie einen Klick aufrufen.

Hier ist eine Barebones- und Komplettlösung, die beweist, dass Sie Benachrichtigungen erhalten können, um an aktuellem (2019) Chrome für Android zu arbeiten (Hinweis: Ich habe jQuery aus Gründen der Kürze verwendet):

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

Zusammenfassend die wichtigsten Informationen zu Benachrichtigungen über aktuelle (2019) Chrome für Android:

  1. Muss HTTPS verwenden
  2. Die Benachrichtigungs-API muss als Reaktion auf Benutzerinteraktivität verwendet werden
  3. Sie müssen die Benachrichtigungs-API verwenden, um die Berechtigung für Benachrichtigungen anzufordern
  4. Sie müssen die ServiceWorker-API verwenden, um die eigentliche Benachrichtigung auszulösen
1
Jeff Bruce

Wenn Sie bereits einen Servicemitarbeiter registriert haben, verwenden Sie Folgendes:

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