Html5 értesítések - ez egyszerűen teszi a bejelentést egy sorba, például a Gmailben
Biztos, hogy mindenki, aki a leveleket a Google-tól használta, legalább egyszer észrevett ilyen közleményeket:
Gmail e-mail értesítések
Ezeket az értesítéseket HTML5 értesítéseknek nevezzük, és akkor is láthatók, ha másik fülre vált, vagy akár minimalizálja a böngészőt.
A cikk végén is van egy kész függvény, amellyel elkezdheti az értesítések küldését anélkül, hogy részletekbe menne.
A caniuse.com szerint. mostantól az ilyen értesítések (HTML5 értesítések) a böngészőkben Chrome, Firefox (35+), Opera (27+), Safari (7.1+) esetén működnek. Az Internet Explorer nem rendelkezik internetes értesítésekkel. Ha mobilplatformokat tart, akkor a HTML5 értesítések részleges támogatása csak az Android böngészőre vonatkozik.
Mielőtt közvetlenül elküldi az értesítést, engedélyt kell kapnunk erre.
Ezt a Notification.requestPermission () módszerrel teheti meg:
A módszer végrehajtása után a jogosultsági kérelem eredménye az engedély változóban lesz.
Itt vannak különböző jelentései magyarázattal:
- alapértelmezett - a jogok iránti kérelmet nem küldték;
- megadva - a felhasználó engedélyezte az értesítések megjelenítését;
- megtagadva - a felhasználó letiltotta az értesítéseket.
Miután megkapta a jogot, közvetlenül meg lehet küldeni az értesítéseket.
Ez nagyon egyszerűen, egy sorban történik:
cím - értesítési fejléc,
opciók (opcionális) a következő opciókkal rendelkezik:
- test - a bejelentés teste (fő szöveg), a különböző böngészőkben és az operációs rendszer különböző módon van vágva (például a Chrome-ban a Win 8.1 alatt a maximális hossza 200 karakter);
- dir - az értesítési képernyő iránya, lehet automatikus, ltr (balról jobbra) vagy rtl (jobbról balra);
- lang - a bejelentés nyelve;
- címke - az értesítés egyedi azonosítója, amelynek segítségével egy másik értesítéssel helyettesítheti vagy törölheti azt;
- ikon - Az értesítésben megjelenítendő kép URL-je (40 × 40 képpontos felbontást ajánlunk).
Próbáljuk meg beállítani a paramétereket és értesítést küldeni:
A fenti kód eredménye
A bejelentésnek is vannak módjai az onclick események kezelésére. onshow. onerror. onclose:
Mindent egy funkció
Most mindegyiket összeállítjuk egyetlen funkcióban, és hozzáadunk néhány ellenőrzést a hibákért:
Most van egy jó funkció, amellyel egyszerűen küldhet értesítéseket anélkül, hogy figyelmen kívül hagyná a jogokkal vagy a böngészők támogatásával kapcsolatos kérelmet:
A funkció eredményei különböző böngészőkben:
App megjelenése a Chrome-ban
Külső megjelenés a Firefoxban