Cauta rapid aici ↑

Notification API

Notification API reprezinta modalitatea prin care ii putem afisa vizitatorului pagini noastre o casuta mica cu informatii de tip text in coltul din dreapta jos a ferestrei browser-ului. Aceasta casuta poate fi vazuta chiar daca vizitatorul schimba pagina html dintr-un tab cu alta pagina html dintr-un alt tab, ba chiar mai mult, casuta ramane vizibila si in momentul in care vizitatorul a minimalizat intreg browser-ul in taskbar (s-a efectuat click pe liniuta din coltul din dreapta sus), cel putin asa se intampla in browser-ul Chrome. Pentru alte browsere, care suporta Notification API, comportamentul acestei casute este putin diferit. In Firefox, casuta dispare dupa 1 - 2 secunde, spre deosebire de browser-ul Chrome, unde trebuie sa dai click pe fereastra pentru a dispare.

La baza oricarui API sta un obiect JavaScript iar la baza Notification API sta obiectul Notification. Practic obiectul Notification nu este altceva decat o functie cu un singur parametru important si inca un parametru optional si a carei denumire este Notification. Deschideti browser-ul Chrome si scrieti in consola urmatoarea linie de cod.

typeof Notification

Chrome va va returna cuvantul "function" iar functiile sunt obiecte de prima clasa in JavaScript. Pe urmatoarea linie, tot in consola, scrieti din nou Notification si imediat, fara spatiu, caracterul punct ( . ). Chrome va va returna un meniu drop-down cu metode si proprietatii ale obiectului Notifcation.

Pentru a ne putea folosi corect si in deplina siguranta, va trebui sa instantiem functia Notation intr-o variabila obiect cu ajutorul cuvantului new si dupa cum v-am spus, functia are un singur parametru important iar noi va trebui sa ii dam un argument iar acest argument va fi textul pe care vrem sa il afisam.

var n = new Notification("Textul tau aici");

Din pacate noi nu putem sa afisam aceasta casuta fara permisiunea vizitatorului (asa a fost conceput aceasta functie obiect) si pentru a avea permisiunea utilizatorului va trebui sa ii cerem permisiunea. Pentru a-i cere permisiunea va trebui sa ne folosim de metoda obiectului Notification Notification.requestPermission() care va avea ca parametru o functie anonima iar in interiorul ei o conditie if, asa cum se vede in exemplul de mai jos. Voi puteti sa va scrieti script-ul in alt fel, scopul este sa obtinem permisiunea utilizatorului pentru ca mai apoi sa ii afisam notificari.

Permisiunile sunt de trei tipuri. Acestea sunt default, denied si granted. Default reprezinta permisiunea care este de baza si este, in acest caz si sinonima cu denied. Permisiunea granted este cea pe care ne-o dorim si cu ajutorul acesteia putem sa ii afisam vizitatorului notificarii. Aceste permisiunii sunt de tip string si reprezinta valoarea proprietatii permission a obiectului Notification. Pentru a obtine permisiunea pe care ne-o dorim, browser-ul ii va afisa utilizatorului o mica casuta de dialog aproape de coltul din stanga sus.

Lista cu metoda, proprietatea si evenimente suportate de obiectul Notification si pe care le vom folosi cel mai des. Se observa la proprietatea permission cele trei valori ce sunt putin identate.

  • requestPermission()
  • permission
    • default
    • denied
    • granted
  • click
  • show
  • error
  • close

Din moment ce nu toate browserele suporta Notification API, noi va trebui sa testam mai intai daca acel browser are in componenta lui functia Notification, functie care ne spune ca suporta Notification API. In exemplul de mai jos va arat un model de script prin care voi puteti sa ii afisati o notificare utilizatorului.