Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 15 von 38
Like Tree7Likes

Thema: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

  1. #1
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.630

    Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Bisschen was zum spielen.
    Das war das Maximum an Funktionen, was ich für die beiden einzigen Desktopbrowser finden konnte, die HTML5 Webnoti beherrschen (Chrome und Firefox).
    HTML-Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="de">
    <meta name="google" content="notranslate">
    <title>Test HTML 5 Notification</title>
    <style type="text/css">
    body {
    	font-family:Arial;
    	font-size:12px;
    }
    </style>
    <script>
    function webnotification(title,options,click,clo,btn) {
    	"use strict";
    	var sendNotification;
    	var defaultaction = function(title,options,click,clo) {
    		var noti = new Notification(title,options);
    		noti.addEventListener('click',click,false);
    		noti.addEventListener('close',clo,false);
    	};
    	if (window.webkitNotifications) {	// Chrome, muss zu oberst abgefragt werden, weil er auch die Methode Notification kennt
    		if (window.webkitNotifications.checkPermission() == 0) {	// 0=PERMISSION_ALLOWED; 1=PERMISSION_NOT_ALLOWED; 2=PERMISSION_DENIED
    			sendNotification = defaultaction;
    		}
    		else {
    			// ACHTUNG: Chrome lässt requestPermission nur zu, wenn es durch einen Eventhandler aufgerufen wird, der durch eine Benutzeraktion angestossen wurde!
    			btn.onclick = function() {
    				window.webkitNotifications.requestPermission();
    				btn.style.display = 'none';
    			}
    			if (btn.style.display = 'none') { btn.style.display = ''; }
    		}
    	}
    	else if ("Notification" in window) {	// Firefox
    		if (Notification.permission === "granted") {
    			sendNotification = defaultaction;
    		}
    		else if (Notification.permission !== 'denied') {
    			Notification.requestPermission(function(permission) {
    				if (!('permission' in Notification)) {
    					Notification.permission = permission;
    				}
    			});
    		}
    	}
    	if (sendNotification) {
    		sendNotification(title,options,click,clo);
    		return true;
    	}
    	else { return false; }
    }
    </script>
    </head>
    
    <body>
    
    <script>
    function sende() {
    	var title = 'Testnoti';
    	var dat = new Date();
    	var options = {
    		body:	'Testnoti Body',
    		icon:	'http://www.slipway.de/images/ico_bell.png',
    		id:		dat.getMilliseconds()
    	};
    	var klick_aufruf = function() {
    		alert('angeklickt ID '+options['id']);
    	};
    	var klick_close = function() {
    		alert('geschlossen ID '+options['id']);
    	};
    	var button_zulassen = document.createElement('input');
    	button_zulassen.value = 'Notificationberechtigung anstossen';
    	button_zulassen.type = 'button';
    	button_zulassen.style.display = 'none';
    	document.getElementById('schalter').appendChild(button_zulassen);
    
    	var ret = webnotification(title,options,klick_aufruf,klick_close,button_zulassen);
    	document.getElementById('testergebnis').innerHTML = 'Senden war '+(ret ? 'erfolgreich' : 'nicht erfolgreich');
    }
    
    </script>
    
    <h1>Test HTML 5 Webnotification</h1>
    
    <div><input onclick="sende();" type="button" value="Test"></div>
    <div id="testergebnis"></div>
    
    <div id="schalter">&nbsp;<br></div>
    
    <div>
    &nbsp;<br>&nbsp;<br>&nbsp;<br>
    Links:<br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/API/notification#Browser_compatibility" target="_new">Browser Kompatibilität</a><br>
    <a href="http://www.html5rocks.com/en/tutorials/notifications/quick/?redirect_from_locale=de" target="_new">Using the Notifications API Ernest Delgado</a><br>
    </div>
    
    </body>
    </html>
    Geändert von mikdoe (18-03-2014 um 13:45 Uhr)
    dbarthel likes this.

  2. #2
    rico2009 Guest

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Coole Spielerei. Leider für den Produktiveinsatz noch nicht geeignet, da es noch von zu wenig Browsern unterstützt wird...

  3. #3
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.630

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Zitat Zitat von rico2009 Beitrag anzeigen
    Leider für den Produktiveinsatz noch nicht geeignet, da es noch von zu wenig Browsern unterstützt wird...
    Jo, es sei denn man hat die Möglichkeit, der Benutzergruppe zu sagen, wenn man das haben will muss man FF oder Chrome nutzen ansonsten Pech gehabt

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.630

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Was mich nur mal wieder verrückt macht ist dieser verd.... Firefox. Wieso kann der sich nicht einfach an die Spec halten? Der blendet die Noti nur 4 Sekunden ein und schließt dann und feuert auch noch onclose, das scheint sogar hardcoded zu sein. Laut Spec muss es angezeigt werden, bis der User es schließt (Eventhandler onclose) oder bestätigt (Eventhandler onclick). Aber nein, der Firefox muss es anders machen. Scheint bei der Änderung der Notification Api in die HTML 5 Webnotification irgendwo um Version 10 herum passiert zu sein, was ich recherchieren konnte. In about:config konnte ich keinen Eintrag finden, der entweder begrifflich oder wertmäßig passend wäre.
    Weiß da jemand mehr drüber?
    Chrome macht es übrigens richtig, exakt nach Spec, Noti bleibt auf, bis der User sie entweder schließt oder anklickt.

  5. #5
    rico2009 Guest

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Ich hätte jetzt gewettet, dass das so sein muss. Eigentlich finde ich das vom FF auch gar nicht so schlecht, denn die Noti muss ja nicht offen bleiben. Aber du hast schon Recht, der einzige Browser der wirklich Spec. Konform ist, ist der Chrome. Alle anderen machen ab und zu ihr eigenes Ding.

  6. #6
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.630

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Zitat Zitat von rico2009 Beitrag anzeigen
    Alle anderen machen ab und zu ihr eigenes Ding.
    Ab und zu? Ein echter Schenkelklopfer.

    Das blöde an der automatischen Schließung ist halt, dass man es nicht sieht, wenn man gerade tippt. Und nach 4 Sekunden ist es weg. Ich baue also jetzt eine Umgehungslösung mithilfe von localStorage, dass ich es selbst alle paar Sekunden anzeige. Ätzend.

  7. #7
    rico2009 Guest

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Zitat Zitat von mikdoe Beitrag anzeigen
    Ab und zu? Ein echter Schenkelklopfer.
    Ja, ich wollte nicht so hart sein.

    Ist halt doof, aber anscheinend ist das wirklich im FF so implementiert. Eventuell ist das aber keine Absicht und wird in den nächsten Versionen noch verbessert. Mal sehen was die Zukunft bringt...

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.677

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Ich hab' das so im Kopf, dass man den Inhalt der Nachricht doch verändern kann, wenn man die ID weiß. Wird die Nachricht denn auch geschlossen, wenn du immer nach 3s den Inhalt einfach erneuerst?

  9. #9
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.630

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Zitat Zitat von kkapsner Beitrag anzeigen
    Ich hab' das so im Kopf, dass man den Inhalt der Nachricht doch verändern kann, wenn man die ID weiß.
    Bist du sicher, dass du von der HTML 5 Webnotification sprichst? Oder meinst du die alte proprietäre Webnoti API, die es nicht mehr gibt. Wie kommt man an diese ID?

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.677

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Die ID vergibst du doch selbst in dem options-Objekt.

    EDIT: Ok - hab' gerade noch ein bisschen rumgespielt. Es ist das "tag"-Attribut in den Optionen. Wenn man aber die Nachricht erneuert, wird auch onclose gefeuert, aber den Eventlistener kann man ja vorher entfernen. Man muss dann nur im onclose (also wenn der Nutzer schließt) den Interval, der die Nachricht immer wieder erscheinen lässt, wieder entfernen. Funktioniert eigentlich ganz gut - die Nachricht flackert nur ein bisschen...

    PS: Warum verwendest du eigentlich immer Schema 4 beim Zugriff auf Objektattribute bei Objekten, die du selbst erzeugt hast, aber den normalen Zugriff bei Objekten, die du wo anders herbekommst?
    Geändert von kkapsner (20-03-2014 um 23:56 Uhr)

  11. #11
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.630

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Zitat Zitat von kkapsner Beitrag anzeigen
    Die ID vergibst du doch selbst in dem options-Objekt.
    Das ist aber ein von mir erfundenes Feld für die Zuordnung. Das hat nichts mit der Webnoti zu tun. Das Feld könnte auch Schlumpfland heißen.

    Zitat Zitat von kkapsner Beitrag anzeigen
    EDIT: Ok - hab' gerade noch ein bisschen rumgespielt. Es ist das "tag"-Attribut in den Optionen. Wenn man aber die Nachricht erneuert, wird auch onclose gefeuert, aber den Eventlistener kann man ja vorher entfernen. Man muss dann nur im onclose (also wenn der Nutzer schließt) den Interval, der die Nachricht immer wieder erscheinen lässt, wieder entfernen. Funktioniert eigentlich ganz gut - die Nachricht flackert nur ein bisschen...
    Zeig mal bitte, was dir da vorschwebt.

    Zitat Zitat von kkapsner Beitrag anzeigen
    PS: Warum verwendest du eigentlich immer Schema 4 beim Zugriff auf Objektattribute bei Objekten, die du selbst erzeugt hast, aber den normalen Zugriff bei Objekten, die du wo anders herbekommst?
    Weiß nicht. Angewohnheit wahrscheinlich. Ist das nicht gut?

  12. #12
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.677

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Zitat Zitat von mikdoe Beitrag anzeigen
    Das ist aber ein von mir erfundenes Feld für die Zuordnung. Das hat nichts mit der Webnoti zu tun. Das Feld könnte auch Schlumpfland heißen.
    Ersetze das "id"-Feld einfach durch ein "tag"-Feld.
    Zitat Zitat von mikdoe Beitrag anzeigen
    Zeig mal bitte, was dir da vorschwebt.
    In etwa so:
    Code:
    var options = {
    		body:	'Testnoti Body',
    		icon:	'http://www.slipway.de/images/ico_bell.png',
    		tag:		dat.getMilliseconds()
    	};
    und
    Code:
    var defaultaction = function(title,options,click,clo) {
    		var noti = new Notification(title,options);
    		noti.addEventListener('click',click,false);
    		noti.addEventListener('close',clo,false);
    		return noti;
    	};
    	
    	/* ... */
    	if (sendNotification){
    		var clear = function(){
    			window.clearInterval(interval);
    			if (clo){
    				clo.apply(this, arguments);
    			}
    		};
    		var noti = sendNotification(title,options,click,clear);
    		var interval = window.setInterval(function(){
    			noti.removeEventlistener("close", clear, false);
    			noti = sendNotification(title,options,click,clear);
    		}, 3000);
    		return true;
    	}
    - ungetestet.
    Zitat Zitat von mikdoe Beitrag anzeigen
    Weiß nicht. Angewohnheit wahrscheinlich. Ist das nicht gut?
    Nö - ist nur mehr Schreibarbeit und ungewohnt.

  13. #13
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.630

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Korbinian, so ähnlich habe ich es in http://forum.jswelt.de/javascript/59...tlistener.html gemacht. Aber dort hakt es noch. Weißt du, woran das liegt?

  14. #14
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.677

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Ah... hab' ich noch nicht angesehen. Muss ich mir mal ansehen.

  15. #15
    j-l-n Guest

    AW: Beispiel für HTML5 Webnotification - derzeit nur in Chrome+Firefox

    Ich wollte letzten auch WebNotification einsetzen. Dabei bin ich wie andere auf folgendes Problem gestoßen: 875114 – Web notifications should optionally be permanent, not automatically close after 4 seconds
    Ich finde es unverschämt, dass Mozilla seit einem Jahr nicht darauf reagiert!

Seite 1 von 3 123 LetzteLetzte

Ähnliche Themen

  1. Antworten: 1
    Letzter Beitrag: 26-08-2013, 22:25
  2. Antworten: 4
    Letzter Beitrag: 13-06-2013, 08:25
  3. Antworten: 3
    Letzter Beitrag: 06-08-2012, 14:07
  4. Antworten: 7
    Letzter Beitrag: 14-06-2010, 13:57
  5. Firefox + Chrome + Javascript
    Von PNS-Richi im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 18-08-2007, 23:20

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •