Notifications API

Üks huvitavamaid uusi HTML5 tulekuga saabuvaid võimalusi, on töölaua teavituste liides. See tähendab, et veebileht saab edastada brauserile kuvamiseks erinevate sündmuste korral teavitusi ja brauser kuvab need veebilehest sõltumatult töölaual. Tegu on tuttava käitumisega programmidest MSN Messenger, Skype jne, mis kuvavad samas stiilis infot, kui mõni kontakt alustab vestlust, logib sisse või välja jne. Nii ei ole vaja hoida veebirakendust pidevalt aktiivsena, et saada muudatustest teada. Näiteks veebipõhine e-posti rakendus võib asuda mõnes taustal olevas aknas, kuid kui saabub uus kiri, annab brauser sellest ikkagi nähtavalt teada.

Paraku töötab momendil selline teavituste kuvamine ainult WebKit põhistes brauserites ja veel täpsemalt, ainult Chrome versioonides 4+. Mingil hetkel aga võib sama oodata kindlasti ka teistesse brauseritesse.

Teavituste toe olemasolu saab kontrollida teavituste objektiga window.webkitNotifications - juhul kui see on olemas, saab teavitusi kasutada.

if(window.webkitNotifications){
    // teavituste tugi on olemas
}

Teavitusi ei saa näidata suvalised veebilehed omal algatusel, vaid selle jaoks tuleb neile kõigepealt vastav luba anda. Seda saab skript küsida teavituste toe olemasolu kontrollimisel - nii näitab brauser valikudialoogi, millega saab kasutaja teavituste kuvamine eesoleval domeenil kas lubada või keelata.

Seda kas teavituste luba on juba antud, saab kontrollida meetodiga checkPermission, mis olemasoleva loa korral tagastab väärtuse 0.

if(window.webkitNotifications.checkPermission()===0){
    // teavituste kuvamise luba on juba olemas
}

Kui aga luba pole, tuleb see küsida meetodiga requestPermission. Antud meetod võtab parameetriks tagasikutse funktsiooni, mis käivitatakse peale kasutaja poolset loa andmist/keelamist.Tagasikutse funktsioonis tuleb uuesti loa olemasolu eraldi kontrollida, selle järgi saab aru, mida kasutaja valis.

window.webkitNotifications.requestPermission(function(){
    if(window.webkitNotifications.checkPermission()===0){
        // nüüd on luba antud ja võib teavitusi kuvada
    }
});

Joonis 1. Teavituse loa küsimine

NB! Luba ei saa skript küsida mitte omal soovil, vaid AINULT kasutaja tegevuse peale. St. et loa küsimise dialoogi saab ette manada, vaid selline skript, mis käivitub mõne kliki peale. n: <a onclick="request_permission_func()">luba teavitused</a>

Juhul kui teavituse kuvamise luba on kasutajalt saadud, võibki hakata kasutajale teavitusi kuvama. Seda saab skript teha juba omal algatusel suvalisel ajal ja erinevalt teavituste lubamise dialoogi kuvamisest enam kasutajapoolset initsiatiivi vaja pole. Teavituse kuvamiseks on kasutusel funktsioon window.webkitNotifications.createNotification mis vajab kolme parameetrit:

1. logo string: Logo URL. Tegu peaks olema ruudukujulise pildiga, vastasel korral venitatakse see kuvamisel välja
2. pealkiri string: Teavituse pealkiri, mida kuvatakse teavituse esimesel real rõhutatud tekstina
3. sisu string: Teavituse sisu teksti kujul. Tegu võib olla ka pikema tekstiga - kui kõik ära ei mahu, muutub teavituse dialoog keritavaks.

Funktsioon tagastab teavituse objekti, mida saab kuvada (teavitus.show()) ja vajadusel ära kustutada (teavitus.cancel()).

var teavitus = window.webkitNotifications.createNotification(
    "/lib/tpl/monobook/user/logo.png",
    "tahvel.info",
    "See on teavituse katsetus, sulgub automaatselt 10 sekundi pärast");

Teavitust saab ka oma käe järgi disainida ning ei pea kindlasti just olemasolevat joont jälgima - kasutades selleks HTML teavitusi. Tegu on siis väikese teavituse aknaga, mille sisuks pole mitte standard teavituse kujundus, vaid etteantud veebiaadressi sisu (nii palju kui sellest mahub). HTML teavitusi saab luua funktsiooniga window.webkitNotifications.createHTMLNotification - erinevalt tavateavitusest vajab funktsioon vaid ühte parameetrit, milleks on teavituse URL.

var msg = window.webkitNotifications.createHTMLNotification('/teavitus.html');

Teavitust ei kuvata ekraanile automaatselt, seda tuleb teha meetodiga show

teavitus.show()

Eesoleva teavituse saab kasutaja ise eemaldada, kuid automaatseks sulgemiseks saab kasutada meetodit cancel

teavitus.cancel()

Joonis 2. Teavituste kuvamine ekraanil

Juhul kui lehel on juba üks teavitus ja lisatakse uus, ei eemalda see olemasolevat, vaid erinevad teavitused asetatakse ühte virna, uuemad eespool. Kusjuures teavitus ei kustu ise ära, kui kasutaja lehelt minema navigeerib või eesoleva tab'i sulgeb - teavitust saab kustutada ainult kasutaja vastavale nupule vajutades või skript cancel meetodiga. Korraga ei näidata ka liiga palju teavitusi - selleks et uuemaid näha, tuleb ennem vanemad sulgeda.

Teavituste demo saab näha aadressilt http://tahvel.info/notify.php.

• HTML5Rocks Notifications API kasutusjuhend