HTML5 Desktop notificaties

Niet helemaal standaard HTML5, maar toch enorm handig voor webkit browsers (Chrome, Safari) zijn de  ”Desktop notifications”. Hiermee kan een site, ook al is deze op de achtergrond, een notificatie sturen aan de rechter-onderhoek van de desktop. Voorkennis: HTML (medium) en Javascript (medium)

Controleren of de browser notificaties ondersteunt

Om te controleren of een browser notificaties ondersteunt kun je in javascript testen of webkitNotifications in de DOM aanwezig is. Dit kan op de volgende manier:

 if (window.webkitNotifications) {
 alert('Je hebt notificatie mogelijkheden!.');
 }

Permissies krijgen

Voordat je notificaties kan gebruiken moet dit goedgekeurd worden door de gebruiker. Dit gebeurd door middel van requestPermission. Er wordt dan in de browser de vraag gesteld of deze site desktop notificaties mag weergeven.

 window.webkitNotifications.requestPermission();

Om te controleren of er goedkeuring is gegeven bestaat de functie checkPermission(). Deze retourneert een 0  als er toestemming is verleend.

 window.webkitNotifications.checkPermission();

Een notificatie aanmaken

De notificatie kan worden aangemaakt met createNotification. Deze accepteerd 3 eigenschappen:

• url; de url van de afbeelding van de notificatie
• title: de titel van de notificatie
• body: de inhoud van de notificatie

 window.webkitNotifications.createNotification(url, title, body);

Het is ook mogelijk een html notificatie te maken door gebruik te maken van createHTMLNotification

 window.webkitNotifications.createHTMLNotification('http://deurl.nl');

Compleet Voorbeeld

Niet om 1 op 1 over te nemen, maar zeker wel waard om naar te kijken. Hieronder een stuk javascript waarin bovenstaande onderdelen zijn meegenomen.

 // alert wanneer notificaties niet worden ondersteund
 if (!window.webkitNotifications) {
 alert('Uw browser ondersteund geen notificaties');
 }

 // bij het klikken op een button
 $('body').click(function(){
 // laat de notificatie zien
 displayNotification();
 });

 // vraag permissie
 function sendPermissionRequest(callback) {
 window.webkitNotifications.requestPermission(callback);
 }

 // toon notificatie
 function displayNotification() {
 // als ik nog geen permissie heb
 if(window.webkitNotifications.checkPermission() > 0){
 // vraag permissie
 sendPermissionRequest(displayNotification);
 } else {
 // ik heb permissie en dus vul het logo, titel en tekst
 var icon = 'link_naar_logo.png';
 var title = 'Mijn titel';
 var body = 'Mijn Tekst!';

// maak de notificatie aan
 var notificatie = window.webkitNotifications.createNotification(icon, title, body);
// laat de notificatie zien
 notificatie .show();
// hide de locatie na 15000 miliseconden
 setTimeout(function(){
 notificatie.cancel();
 }, '15000');
}
}