Как да изпращате насочени известия с JavaScript

JavaScript известията са начин да изпращате съобщения до вашите потребители в реално време. Можете да ги използвате, за да уведомявате за актуализации на вашия уебсайт, нови съобщения в чат, имейли или всякакви дейности в социалните медии. Можете също да използвате известия за напомняния в календара (като наближаваща среща в Google Meet или Zoom).

Научете как да създавате известия за събития в JavaScript и да ги изпращате на вашия телефон или уеб браузър. Ще постигнете това с помощта на вграден JavaScript от страна на клиента — не е необходима външна библиотека!

Искане на разрешение за изпращане на известия

За да създадете известие, трябва да се обадите на уведомление клас за създаване на обект. Той ви дава достъп до различни свойства и методи, които можете да използвате, за да конфигурирате вашето известие. Но преди да създадете известие, ще трябва първо да поискате разрешение от потребителя.

Следният JavaScript ще поиска разрешение за изпращане на потребителски известия. The requestPermission call ще върне съобщение, което показва дали браузърът позволява известия или не:

конст бутон = документ.querySelector("бутон")
 button.addEventListener("клик", ()=> {
 Notification.requestPermission().then(разрешение => {
 предупреждение (разрешение)
 })
})

Когато щракнете върху бутона, може да получите предупреждение, което казва отказано. Това означава, че браузърът е забранил на JavaScript да изпраща известия за събития. Състоянието на разрешението е отказано за случаите, когато потребителят изрично е забранил на сайтовете да изпращат известия (чрез настройките на браузъра) или потребителят сърфира в инкогнито режим.

В такива случаи е по-добре да уважите решението на потребителя за отказани известия и трябва да се въздържате от по-нататъшно безпокойство.

Изпращане на основни известия

Вие създавате насочено известие, като създадете a уведомление обект с новата ключова дума. За дълбоко гмуркане в обектно-ориентираното програмиране можете да се обърнете към нашето ръководство за как да създавате класове в JavaScript.

Тъй като ще изпращате известия само ако е дадено разрешение, ще трябва да го обвиете в ако проверка.

конст бутон = документ.querySelector("бутон")
button.addEventListener("клик", ()=> {
 Notification.requestPermission().then(къдрене => {
ако(перм "разрешено") {
нов Уведомление(„Примерно известие“)
 }
 })
})

Щракнете върху бутона и ще получите насочено известие в долния десен ъгъл на вашия уеб браузър с посочения текст.

Това е най-основният начин за създаване на известия и работи както на телефона, така и на компютъра. Нека да разгледаме някои разширени свойства на известията.

Свойства за разширени известия

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

Свойството на тялото

Първото свойство, което трябва да знаете е тяло Имот. Бихте използвали това, за да добавите тяло към вашето известие, обикновено за да предадете повече информация под формата на текст. Ето един прост пример:

конст бутон = документ.querySelector("бутон")
button.addEventListener("клик", ()=> {
 Notification.requestPermission().then(къдрене => {
ако(перм "разрешено") {
нов Уведомление(„Примерно известие“, {
 тяло: „Това е повече текст“,
 })
 }
 })
})

Ако изпълните този код, основният текст ще се покаже в насоченото известие, под Примерно известие заглавка.

Атрибутът данни

Често пъти може да искате да добавите персонализирани данни към известията. Може би искате да покажете конкретно съобщение за грешка, ако разрешението е отказано, или да съхраните данни, които сте получили от API. За всички подобни случаи можете да използвате данни свойство за добавяне на персонализирани данни към вашето известие.

button.addEventListener("клик", ()=> {
 Notification.requestPermission().then(къдрене => {
ако(перм "разрешено") {
конст известие = нов Уведомление(„Примерно известие“, {
 тяло: „Това е повече текст“,
 данни: {Здравейте: "свят"}
 })

 предупреждение (notification.data.hello)
 }
 })
})

Можете да получите достъп до данните от данни свойство, подобно на показаното в горния кодов блок (вътре в тревога()).

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

конст известие = нов Уведомление(„Примерно известие“, { 
 тяло: „Това е повече текст“,
 данни: {Здравейте: "свят"} 
})
уведомление. addEventListener("близо", e => {
конзола.log (e.target.data.hello)
})

Това е отличен начин за предаване на данни, ако трябва да направите нещо, когато някой затвори известие или щракне върху него. Освен на близо събитие (което се изпълнява, когато затворите известието), трябва да ги запазите слушатели на събития в главата ти:

• шоу: Изпълнява се, когато се покаже известието.
• щракнете: Изпълнява се, когато потребителят щракне някъде в известието.
• грешка: Изпълнява се, когато откажете разрешение на JavaScript за изпращане на известия.

Иконата Собственост

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

конст известие = нов Уведомление(„Примерно известие“, { 
 икона: "лого.png"
})

Ако ви е трудно да се свържете с вашите файлове, трябва да го направите разберете работата на относителните и абсолютните URL адреси.

Когато запишете файла, опресните браузъра и щракнете върху бутона, известието ще има изображение, показано в лявата страна на заглавката и тялото.

Атрибутът на етикета

Когато зададете етикет във вашето известие, вие на практика давате на известието уникален идентификатор. Две известия не могат да съществуват заедно, ако имат един и същ етикет. Вместо това най-новото известие ще замени по-старото известие.

Помислете за нашия предишен пример за бутон (без етикет). Ако щракнете върху бутона три пъти бърза последователност, ще се появят трите известия и те ще се подредят едно върху друго. Сега да приемем, че сте добавили следния таг към известието:

конст известие = нов Уведомление(„Примерно известие“, { 
 тяло: „Това е повече текст“,
 таг: „Новият ми етикет“
})

Ако щракнете отново върху бутона, ще се появи само едно поле за известяване. Всяко следващо щракване ще презапише предишното известие, така че ще се покаже само едно известие, без значение колко пъти щракнете върху бутона. Това е полезно, ако искате да добавите динамични данни (като Math.random()) към тялото:

конст известие = нов Уведомление(„Примерно известие“, { 
 тяло: математика.random()
 икона: "лого.png",
 таг: „Етикетът на тялото ми“
})

Всеки път, когато щракнете върху бутона, ще се появи нов номер. Използвайте свойството етикет, ако искате да презапишете текущо известие с нова информация вътре в него. В приложение за съобщения, например, можете да използвате атрибута tag, за да презапишете известието с нови съобщения.

Пример за насочено известие с помощта на JavaScript

Следващият пример открива всеки път, когато загубите фокус върху страницата си (т.е. когато затворите страницата или отворите нов раздел). В този случай кодът изпраща известие с молба да върнете:

позволявам уведомление
документ.addEventListener("промяна на видимостта", ()=> {
ако(документ.visibilityState "скрит") {
 известие = нов Уведомление("Върни се, моля", {
 тяло: "Не си тръгвай още :("
 таг: "Върни се"
 })
 } друго {
 notification.close()
 }
})

Всеки път, когато загубите фокус върху тази страница, ще получите известие с молба да се върнете на страницата. Но след като се върнете на страницата, друго блокът се изпълнява, което затваря насоченото известие. Тази техника е отлична в ситуации, в които искате да дадете на потребителя някакъв вид информация, след като напусне вашата страница.

Научете повече за JavaScript

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