ПредишенСледващото

Със сигурност всички, които използват имейл от Google, виждал уведомление по този начин:

уведомления за HTML5 - тя просто не забелязват ред като в Gmail

поща Gmail предупреждение

Тези уведомления се наричат ​​HTML5 известия, и те могат да се видят, дори и да отидем в друг раздел или дори минимизирате браузера.

Също така в края на статията има готова функция, с която можете да започнете да изпращате предизвестие, без да навлиза в подробности.

Според caniuse.com на сайта. Сега тези известия (HTML5 Известия) работят на Chrome, Firefox (35+), Opera (27+), Safari (7.1+). Internet Explorer подкрепа Интернет Уведомление не е така. Ако говорим за мобилна платформа, частична подкрепа на HTML5 Известия е само за браузъра за Android.

Преди да ви изпраща известия директно, ние трябва да направим (разрешение) за него.
Това може да стане метод Notification.requestPermission ():

След изпълнението на метода, в резултат от заявка отдясно ще бъде в променлива разрешение.

Тук различни стойности с обяснения:

  • подразбиране - искане за право да не изпраща;
  • отпусната - потребителят разрешено да показват известия;
  • отрече - потребителят е забранил да показват известия на работния плот.

Вземи прав, ние можем да преминете направо към изпращането на известия.
Това става много лесно, един ред:

заглавие - заглавието на уведомлението,

опции (по избор) има следните параметри:

  • тяло - тялото на уведомлението (основен текст), в различни браузъри и операционни системи се реже по различен начин (например Chrome за Win 8.1 максимална дължина - 200 знака);
  • реж - посока на уведомленията на дисплея може да бъде автоматично, л (отляво надясно) или RTL (отдясно наляво);
  • Ланг - езикът на съобщението;
  • етикет - уникален идентификатор на съобщението, с която можете да го замени с друг уведомление или изтриване;
  • икона - URL на изображението, която ще бъде показана в уведомлението (препоръчително резолюция от 40 × 40 пиксела).

Нека се опитаме да зададете параметрите и изпращане на уведомление:

уведомления за HTML5 - тя просто не забелязват ред като в Gmail

Резултати от кода по-горе

Също така, има начини за изпращане-OnClick манипулатор събитие. onshow. onerror. onclose:

уведомления за HTML5 - тя просто не забелязват ред като в Gmail

Една функция за всички

Сега събере всичко в една функция и се добавят някои проверка за грешки:

Сега имаме една красива черта, с която можете да просто да изпратите уведомление, не се разсейва от искане на подкрепата на права или браузър:

Резултатът от функцията в различни браузъри:

уведомления за HTML5 - тя просто не забелязват ред като в Gmail

Външен вид известие Chrome

уведомления за HTML5 - тя просто не забелязват ред като в Gmail

известие Изяви в Firefox

Подкрепете проекта - споделете линка, благодаря!