Notifikationer i OS X Mountain Lion – via webbläsaren

En ny rolig sak som vi webbutvecklare har tillgång till i OS X Mountain Lion är notifikationer "till skrivbordet".

Notifikationer via webbläsaren har funnits en längre tid (i alla fall i Chrome och Safari), men i och med Notification Center så får vi en rad nya möjligheter då man kan skicka notifikationer som likt Twitter, Mail.app och andra applikationer dyker upp på skrivbordet, och placeras snyggt och prydligt i Notification Center.

Här har jag satt upp ett demo (Uppdaterad; länk borttagen). För kod, läs vidare.

Det hela är väldigt enkelt:

 1$(document).ready(function(){
 2    if (window.webkitNotifications) {
 3        console.log("Din webbläsare stödjer notifikationer");
 4    } else {
 5          console.log("Din webbläsare stödjer inte notifikationer... =( ");
 6    }
 7    function check_permission() {
 8        if(window.webkitNotifications.checkPermission() === 0) {
 9            return true;
10        } else {
11            return false;
12        }
13    }
14    $('.permission').click(function(e){
15        e.preventDefault();
16        window.webkitNotifications.requestPermission(check_permission);
17    });
18    $('.display').click(function(){
19        if(check_permission()) {
20            var message = 'Mitt meddelande'
21            var notification = window.webkitNotifications.createNotification(null,'En notifikation',message);
22            notification.show();
23        } else {
24            alert('Du måste ge tillåtelse att ta emot notifikationer');
25        }
26    });
27});
 1$(document).ready(function(){
 2    if (window.webkitNotifications) {
 3        console.log("Din webbläsare stödjer notifikationer");
 4    } else {
 5          console.log("Din webbläsare stödjer inte notifikationer... =( ");
 6    }
 7    function check_permission() {
 8        if(window.webkitNotifications.checkPermission() === 0) {
 9            return true;
10        } else {
11            return false;
12        }
13    }
14    $('.permission').click(function(e){
15        e.preventDefault();
16        window.webkitNotifications.requestPermission(check_permission);
17    });
18    $('.display').click(function(){
19        if(check_permission()) {
20            var message = 'Mitt meddelande'
21            var notification = window.webkitNotifications.createNotification(null,'En notifikation',message);
22            notification.show();
23        } else {
24            alert('Du måste ge tillåtelse att ta emot notifikationer');
25        }
26    });
27});

OBS! window.webkitNotifications är numera window.notifications i Google Chrome.

Det fanns en märklig skillnad mellan Chrome och Safari som jag upptäckte, och det var att Safari kräver en callback på window.webkitNotifications .requestPermission() (därav check_permission-funktionen), annars verkar det inte vara några större skillnader.

Notera också att det inte går att köra notifikationer lokalt, direkt från en HTML-fil, utan det måste gå via en server – annars kommer du att råka ut för en "SECURITY_ERR: DOM Exception 18".

Igen, för att se ett fungerade exempel och läsa mer, kika in "den här sidan" som jag har satt upp. Läs gärna också den här artikeln hos html5rocks.com som också visar hur man kan fylla en notifikation med egen html-kod. Dessa typer av notifikationer verkar dock inte placeras i Notification Center.

Kan tänka mig en hel del intressanta användningsområden för detta, live-bloggar vore ett, likaså en rolig och användbar funktion som Twitters webbklient skulle kunna använda sig av.

Uppdaterad 2016-08-22: Just detta API:et är numera deprekerat. Test-länk borttagen.