suchen

Heim >Web-Frontend >H5-Tutorial >Ein Beispielcode für die Implementierung der Desktop-Erinnerungsfunktion mit HTML5

Ein Beispielcode für die Implementierung der Desktop-Erinnerungsfunktion mit HTML5

零下一度
零下一度Original
2017-04-22 14:37:542696Durchsuche

Einführung in Desktop-Benachrichtigungen

Die Desktop-Benachrichtigungsfunktion ermöglicht es dem Browser, Benutzer über Nachrichten zu benachrichtigen, auch wenn diese minimiert sind. Dies ist die natürlichste Kombination mit WebIM. Der einzige Browser, der derzeit die Desktop-Benachrichtigungsfunktion unterstützt, ist jedoch Chrome 5+. Im tatsächlichen Nutzungsprozess sollte die Beeinträchtigung des Benutzers durch die Benachrichtigungsfunktion minimiert werden und das Auftreten der Benachrichtigungsfunktion sollte minimiert werden. Dies erfordert die Lösung der folgenden Probleme:

  • 1. Empfangen Stellen Sie sicher, dass beim Empfang mehrerer Nachrichten nur eine Benachrichtigung angezeigt wird.

  • 2. Wenn sich der Benutzer auf der Seite befindet, auf der IM angezeigt wird (die Seite befindet sich im Fokusstatus), wird keine Benachrichtigung angezeigt ;

  • 3. Wenn der Benutzer mehrere Registerkarten verwendet, um mehrere Seiten mit IM zu öffnen, wird keine Benachrichtigung angezeigt, solange sich eine Seite im Fokusstatus befindet;

  • 4. Wie lassen Sie Benutzer auf die schwebende Benachrichtigungsebene klicken, um das spezifische Chatfenster zu finden

  • 5. Darüber hinaus gibt es auch ein Komfortproblem gelöst

Desktop Reminder Notification API

window.webkitNotifications

  • requestPermission Kommunikationsberechtigung anfordern

  • checkPermission Kommunikationsberechtigung prüfen

  • createNotification Kommunikation erstellen

  • show Benachrichtigung anzeigen

Code Um 

<!DOCTYPE HTML>
<html>
<head
<meta charset="gbk">  
<title>Creating OS notifications in HTML5</title>
</head>
<body>
<input type="button" value="验证授权" onclick="init();" />
<input type="button" value="弹出消息" onclick="notify();" />

    <script type="text/javascript">
        const miao = 5;

        function init() {
            if (window.webkitNotifications) {
                window.webkitNotifications.requestPermission();
            }
        }

        function notify() {
            var icon = "logo.png";
            var title = "Hello World";
            var body =  "You Are My World (5秒后自动关闭)";

            if (window.webkitNotifications) {
                if (window.webkitNotifications.checkPermission() == 0) {
                    var popup = window.webkitNotifications.createNotification(icon, title, body);
					popup.ondisplay = function(event) {
                        setTimeout(function() {
                            event.currentTarget.cancel();
                        }, miao * 1000);
                    }
                    popup.show();
                    popup.show();
                } else {
                    window.webkitNotifications.requestPermission();
                    return;
                }
            }
        }
    </script>

</body>
</html>

Schüler zu erreichen, die HTML5 lernen müssen, achten Sie bitte auf die PHP-Chinesisch-Website HTML5-Video-Tutorials Online-Video-Tutorials können kostenlos angesehen werden!

Das obige ist der detaillierte Inhalt vonEin Beispielcode für die Implementierung der Desktop-Erinnerungsfunktion mit HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden von HTML5 zum Implementieren des gepunkteten LinieneffektcodesNächster Artikel：Verwenden von HTML5 zum Implementieren des gepunkteten Linieneffektcodes

In Verbindung stehende Artikel

Mehr sehen