So zeigen Sie Benachrichtigungen über Browser hinweg an

Ich versuche eine Website zu erstellen, die Benachrichtigungen anzeigt, wenn ein Ereignis eintritt. Ich habe the MDN page for Notifications überprüft und ich habe ein Beispiel geschrieben, das in Firefox Developer Edition 58.0b7 funktioniert, aber hat ein seltsames Verhalten in Edge 40.15063.674.0 und Chrome 62.0.3202.94 (in Windows 10).So zeigen Sie Benachrichtigungen über Browser hinweg an

ist hier ein Mindest vollständige nachprüfbare Beispiel:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>test</title> 
</head> 
<body> 
    <script> 
    function notify(str) { 
    if(!("Notification" in window) || Notification.permission === "deneided") { 
    return alert(str); 
    } 
    if (Notification.permission === "granted") { 
    return new Notification("TITLE", {body: str}); 
    } 
    Notification.requestPermission().then(perm => { 
    console.log("request result", perm); 
    console.log("Notification.permission", Notification.permission); 
    if (perm === "granted") { 
     return new Notification("TITLE", {body: str}); 
    } 
    }); 
} 

notify("test"); 
    </script> 
</body> 
</html>

Speichern dieser Code in einer Datei auf Ihrem Computer und öffnen Sie sie mit einem Browser.

Wenn Sie in Firefox Berechtigungen erteilen, funktioniert es und eine Benachrichtigung wird angezeigt.

Wenn Sie in Chrome Berechtigungen erteilen, können Sie in der Konsole sehen, dass die Berechtigungsanforderung "granted" zurückgegeben hat, aber immer noch "Standard" ist und die Benachrichtigung nicht angezeigt wird. Wenn Sie erneut notify ausführen, wird ein weiterer Dialog angezeigt, der nach Berechtigungen zum Anzeigen von Benachrichtigungen fragt.

In Edge ist nach Erteilung der Berechtigungen granted, aber der Versuch, eine neue Benachrichtigung zu erstellen, führt zu einem UnknownError.

Warum funktioniert der Code in Firefox, aber nicht in Edge oder Chrome? Wie kann ich es zumindest in Chrome (und hoffentlich in Edge) zum Laufen bringen?

Quelle

2017-11-28 Hawkings

Sie können dem Beispiel folgen, das sie in MDN notification API Docs unter "Alternatives Beispiel: run on page load" bereitstellen. Sie können Benachrichtigungen mit weniger Aufwand anzeigen.

versuchen, den Code unten mit lokalen Dateien Sie nach dem Aktualisieren der Seite aktualisiert Notification.permission Variable sehen

In Chrome (hier die Snippet Mitteilung Versuche verweigern).

Notification.requestPermission().then(function(result) { 
 
    console.log(result); 
 
}); 
 

 
document.querySelector('#notifyButton').addEventListener('click', showNotification) 
 

 
function showNotification(){ 
 
\t console.log('Clicked!!') 
 
\t var options = { 
 
\t  body: 'this is the body!' 
 
\t } 
 
\t var n = new Notification('this is the title', options); 
 
}

<input id="notifyButton" type="button" name="notify" value="click for notification">

Quelle

2017-11-28 21:22:06 randomguy04

Code in Chrom Ergebnisse in dem gleichen Ergebnis wie mein Code. Die Benachrichtigung wird nicht angezeigt, und "Notification.permission" ist auch nach dem erneuten Laden der Seite immer noch "default". – Hawkings

So zeigen Sie Benachrichtigungen über Browser hinweg an

Antwort

Verwandte Themen