Cu siguranta oricine a folosit mailul de la Google, cel putin o data a vazut astfel de notificari:
Notificări prin e-mail Gmail
Aceste notificări sunt numite Notificări HTML5 și sunt vizibile chiar dacă treceți la altă filă sau chiar minimalizați browserul.
De asemenea, la sfârșitul articolului există o funcție gata făcută cu care puteți începe să trimiteți notificări fără a intra în detalii.
Potrivit caniuse.com. Aceste notificări (notificări HTML5) funcționează în browsere Chrome, Firefox (35+), Opera (27+), Safari (7.1+). Internet Explorer nu are notificări pe Internet. Dacă luați în considerare platformele mobile, suportul parțial pentru notificările HTML5 este numai pentru browserul Android.
Înainte de a trimite o notificare direct, trebuie să obținem permisiunea de a face acest lucru.
Puteți face acest lucru folosind metoda Notification.requestPermission ():
După ce metoda este executată, rezultatul cererii de drepturi va fi în variabila permisiune.
Iată diferitele sale semnificații cu explicații:
- implicit - cererea de drepturi nu a fost trimisă;
- acordat - utilizatorul a permis afișarea de notificări;
- refuzat - utilizatorul a dezactivat notificările.
După ce am primit acest drept, putem continua să trimitem notificări.
Acest lucru se face foarte simplu, într-o singură linie:
titlul - antetul de notificare,
opțiunile (opțional) are următoarele opțiuni:
- corpul - textul notificării (textul principal), în diferite browsere și sistemul de operare este tăiat diferit (de exemplu, în Chrome, sub Win 8.1, lungimea maximă este 200 caractere);
- dir - direcția afișării notificării, poate fi automată, ltr (din stânga la dreapta) sau rtl (de la dreapta la stânga);
- lang - limba notificării;
- eticheta - identificatorul unic al notificării, cu ajutorul căruia îl puteți înlocui cu o altă notificare sau o puteți șterge;
- pictogramă - adresa URL a imaginii care va fi afișată în notificare (vă recomandăm rezoluția de 40 × 40 px).
Să încercăm să setăm parametrii și să trimitem o notificare:
Rezultatul codului de mai sus
De asemenea, notificarea conține metode pentru gestionarea evenimentelor onclick. OnShow. onerror. onclose:
O funcție pentru tot
Acum vom pune totul împreună într-o singură funcție și vom adăuga câteva verificări pentru erori:
Acum avem o caracteristică frumoasă cu care puteți trimite pur și simplu notificări fără a fi distras de o cerere de drepturi sau de suport pentru browser:
Rezultatul funcției în diferite browsere:
Apariția aplicației în Chrome
Aspect de notificare în Firefox