mikdoe
Moderator
Frage: Warum zeigt nur der Firefox (Chrome funktioniert) die drei Notis der Schaltfläche "Test 3 Notis auf einmal" nicht an?
Ist dem Firefox die Schleife zu schnell? Wie kann man in JS Verzögerungen in einer Schleife machen?
Können andere bestätigen, dass FF sie nicht anzeigt oder ist das nur bei mir so?
Weiß jemand eine Lösung?
Online: Test HTML 5 Notification
Zum kopieren:
Ist dem Firefox die Schleife zu schnell? Wie kann man in JS Verzögerungen in einer Schleife machen?
Können andere bestätigen, dass FF sie nicht anzeigt oder ist das nur bei mir so?
Weiß jemand eine Lösung?
Online: Test HTML 5 Notification
Zum kopieren:
HTML:
<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
function webnotification(act,title,options,click,btn) {
"use strict";
if (act == 'check') {
if (window.webkitNotifications || "Notification" in window) { return true; }
else { return false; }
}
else if (act == 'send') {
var status = localStorage.getItem('kal_termstat'+options['id']);
if (!status) {
var sendNotification;
var defaultaction = function(title,options,click) {
var listener = function() { // Zwangsweise über Variable, weil sonst removeEventListener() nicht klappt
var status = localStorage.getItem('kal_termstat'+options['id']);
localStorage.removeItem('kal_termstat'+options['id']);
window.onbeforeunload = null;
if (status == '1') { // Firefox feuert beim onclick auch immer onclose
webnotification('send',title,options,click,btn);
}
};
var schliessen = function() {
window.clearTimeout(timer);
noti.removeEventListener('close',listener,false);
noti.close();
localStorage.removeItem('kal_termstat'+options['id']);
};
var noti = new Notification(title,options);
noti.addEventListener(
'click'
,function() {
schliessen();
window.onbeforeunload = null;
if (click) { click(); }
}
,false
);
noti.addEventListener('close',listener,false);
var timer = window.setTimeout(function() { // damit sich der Chrome genauso verhält wie der Firefox, alle paar Sekunden neu anzeigen
noti.close();
},4500);
window.addEventListener('beforeunload',function() { schliessen(); },false); // damit sich der Chrome genauso verhält wie der Firefox, Noti nach Seitenwechsel schließen
};
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!
if (btn) {
btn.onclick = function() {
window.webkitNotifications.requestPermission(function() { webnotification(act,title,options,click,btn); }); // direkt nach Rechteerteilung Noti anzeigen
btn.style.display = 'none';
}
if (btn.style.display = 'none') { btn.style.display = ''; }
return 4;
}
else { return 0; }
}
}
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;
}
webnotification(act,title,options,click,btn); // direkt nach Rechteerteilung Noti anzeigen
});
return 4;
}
}
if (sendNotification) {
sendNotification(title,options,click);
localStorage.setItem('kal_termstat'+options['id'],'1'); // Status 1=wird noch angezeigt
return 1;
}
else { return 0; }
}
else { return 2; }
}
}
</script>
</head>
<body>
<script>
function sende() {
window.setTimeout(function() {
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 title = 'Testnoti '+document.getElementById('notiid').value;
var options = {
body: 'Testnoti Body',
icon: 'http://www.slipway.de/images/ico_bell.png',
id: document.getElementById('notiid').value,
tag: document.getElementById('notiid').value,
lang: 'de'
};
var klick = function() {
alert('angeklickt ID '+options['id']);
};
var ret = parseInt(webnotification('send',title,options,klick,button_zulassen),10);
document.getElementById('testergebnis').innerHTML = 'Senden war '+(ret
? (ret == 2
? 'unnötig, weil die Anzeige noch läuft'
: (ret == 4
? 'erfolgreich, Anzeige erfolgt unmittelbar nach Rechteerteilung'
: 'erfolgreich'
)
)
: 'nicht erfolgreich'
);
},50); // falls man die Noti verzögert anzeigen möchte, um zu zeigen, dass sie auch zu sehen ist, wenn der Browser im Hintergrund liegt
}
function sendedrei(data) {
var dat = '20140327';
var zeit = '0755';
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);
jQuery.each(data['stapel'],function(g) {
if (dat <= data['stapel'][g]['bis_dat'] && zeit <= data['stapel'][g]['bis_zeit']) {
console.log(data['stapel'][g]['id']);
var title = data['stapel'][g]['title'];
var options = {
body: data['stapel'][g]['body'],
icon: data['icon'],
id: data['stapel'][g]['id'],
tag: data['stapel'][g]['id'],
lang: 'de'
};
var klick = '';
var ret = webnotification('send',title,options,klick,button_zulassen);
console.log(ret);
}
});
}
function startsendedrei() {
sendedrei({"icon":"http://www.slipway.de/images/ico_bell.png","stapel":[{"body":"test1","bis_zeit":"0800","von_zeit":"0715","aktion":"0","title":"Benachrichtigung für Heute um 08:00","id":"ERI2014032707151","bis_dat":"20140327"},{"body":"test3","bis_zeit":"0810","von_zeit":"0740","aktion":"0","title":"Benachrichtigung für Heute um 08:10","id":"ERI2014032707403","bis_dat":"20140327"},{"body":"test2","bis_zeit":"0800","von_zeit":"0715","aktion":"0","title":"Benachrichtigung für Heute um 08:00","id":"ERI2014032707152","bis_dat":"20140327"}]});
}
</script>
<h1>Test HTML 5 Webnotification</h1>
<div>
ID: <input type="text" id="notiid"> (unterschiedliche Nummer verwenden stapelt die Notis, das sieht im Chrome sehr nett aus)<br>
<input onclick="sende();" type="button" value="Test">
</div>
<div id="testergebnis"></div>
<div id="schalter"></div>
<br> <br> <br> <br>
<form method="get" action="http://www.google.de" name="test"></form>
<input type="button" value="Verschwindet die Noti, wenn man hier klickt?" onclick="document.test.submit();">
<br> <br>
<form method="get" action="html5_noti.html" name="test2"></form>
<input type="button" value="Verschwindet sie auch, wenn man hier klickt?" onclick="document.test2.submit();">
<br> <br> <br> <br>
<input type="button" value="localStorage leeren" onclick="localStorage.clear();">
<br> <br> <br> <br>
<input onclick="startsendedrei();" type="button" value="Test 3 Notis auf einmal">
<div>
<br> <br> <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>
Zuletzt bearbeitet:
