Како слати пусх обавештења помоћу ЈаваСцрипт-а

ЈаваСцрипт обавештења су начин да шаљете поруке својим корисницима у реалном времену. Можете их користити за обавештавање о ажурирањима ваше веб локације, новим порукама ћаскања, имејловима или било којим активностима друштвених медија. Такође можете да користите обавештења за подсетнике у календару (као што је састанак који се приближава на Гоогле Меет-у или Зоом-у).

Научите како да креирате обавештења о догађајима у ЈаваСцрипт-у и да их пошаљете на телефон или веб прегледач. Ово ћете постићи коришћењем уграђеног ЈаваСцрипт-а на страни клијента — није потребна екстерна библиотека!

Захтевање дозволе за слање обавештења

Да бисте креирали обавештење, потребно је да позовете Обавештење класе за креирање објекта. Омогућава вам приступ различитим својствима и методама које можете користити за конфигурисање обавештења. Али пре него што креирате обавештење, мораћете прво да затражите дозволу од корисника.

Следећи ЈаваСцрипт ће захтевати дозволу за слање обавештења корисницима. Тхе рекуестПермиссион позив ће вратити поруку која показује да ли претраживач дозвољава обавештења или не:

конст дугме = документ.куериСелецтор('дугме')
 буттон.аддЕвентЛистенер("кликни", ()=> {
 Нотифицатион.рекуестПермиссион().затим(дозволу => {
 упозорење (дозвола)
 })
})

Када кликнете на дугме, можда ћете добити упозорење које каже демантовао. То значи да је претраживач забранио ЈаваСцрипту да шаље обавештења о догађајима. Статус дозволе је демантовао за случајеве када је корисник изричито спречио сајтове да шаљу обавештења (преко подешавања претраживача) или корисник сурфује у анонимном режиму.

У таквим случајевима, боље је поштовати одлуку корисника за одбијена обавештења и требало би да се уздржите од даљег узнемиравања.

Слање основних обавештења

Пусх обавештење креирате креирањем а Обавештење објекат са новом кључном речи. За дубље уроњење у објектно оријентисано програмирање, можете погледати наш водич о како креирати класе у ЈаваСцрипт-у.

Пошто бисте слали обавештења само ако је дозвола дата, требало би да је умотате у датотеку ако проверавати.

конст дугме = документ.куериСелецтор('дугме')
буттон.аддЕвентЛистенер("кликни", ()=> {
 Нотифицатион.рекуестПермиссион().затим(перм => {
ако(перм 'одобрено') {
Нова Обавештење („Пример обавештења“)
 }
 })
})

Кликните на дугме и добићете пусх обавештење у доњем десном углу вашег веб претраживача са наведеним текстом.

Ово је најосновнији начин за креирање обавештења и ради на вашем телефону као и на рачунару. Хајде да погледамо нека напредна својства обавештења.

Напредна својства обавештења

Поред наслова обавештења, такође можете проследити аргумент опција конструктору када креирате објекат обавештења. Овај аргумент опција мора бити објекат. Овде можете додати неколико опција за прилагођавање обавештења.

Власништво тела

Прво својство које треба да знате је тело имовина. Ово бисте користили да додате тело свом обавештењу, обично да бисте пренели више информација у облику текста. Ево једноставног примера:

конст дугме = документ.куериСелецтор('дугме')
буттон.аддЕвентЛистенер("кликни", ()=> {
 Нотифицатион.рекуестПермиссион().затим(перм => {
ако(перм 'одобрено') {
Нова Обавештење („Пример обавештења“, {
 тело: „Ово је више текста“,
 })
 }
 })
})

Ако покренете овај код, основни текст ће се приказати у пусх обавештењу, испод Пример обавештења заглавље.

Атрибут података

Често ћете можда желети да додате прилагођене податке у обавештења. Можда желите да прикажете одређену поруку о грешци ако је дозвола одбијена или да сачувате податке које сте примили од АПИ-ја. За све такве случајеве можете користити података својство за додавање прилагођених података у обавештење.

буттон.аддЕвентЛистенер("кликни", ()=> {
 Нотифицатион.рекуестПермиссион().затим(перм => {
ако(перм 'одобрено') {
конст нотифицатион = Нова Обавештење („Пример обавештења“, {
 тело: „Ово је више текста“,
 подаци: {Здраво: "свет"}
 })

 упозорење (нотифицатион.дата.хелло)
 }
 })
})

Можете приступити подацима из података својство слично као што је приказано у горњем блоку кода (унутар упозорење()).

Такође можете да повежете слушаоце догађаја са својим обавештењима. На пример, следећи слушалац догађаја се извршава сваки пут када затворите пусх обавештење. Функција повратног позива једноставно евидентира прилагођену поруку.

конст нотифицатион = Нова Обавештење („Пример обавештења“, { 
 тело: „Ово је више текста“,
 подаци: {Здраво: "свет"} 
})
обавештење. аддЕвентЛистенер("Близу", е => {
конзола.лог (е.таргет.дата.хелло)
})

Ово је одличан начин за прослеђивање података ако треба да урадите нешто када неко затвори обавештење или кликне на њега. Осим на Близу догађај (који се извршава када затворите обавештење), требало би да их задржите слушаоци догађаја у твојој глави:

• Прикажи: Извршава се када се прикаже обавештење.
• кликните: Извршава се када корисник кликне било где у обавештењу.
• грешка: Извршава се када одбијете ЈаваСцрипт дозволу за слање обавештења.

Икона Својство

Тхе икона својство је за додавање иконе у пусх обавештење. Под претпоставком да имате логотип иконе са именом лого.пнг у тренутном директоријуму, можете га користити у својим обавештењима на следећи начин:

конст нотифицатион = Нова Обавештење („Пример обавештења“, { 
 икона: "лого.пнг"
})

Ако се мучите да повежете своје датотеке, морате разумеју рад релативних и апсолутних УРЛ адреса.

Када сачувате датотеку, освежите претраживач и кликнете на дугме, обавештење ће имати слику приказану на левој страни заглавља и тела.

Ознака Атрибут

Када поставите таг атрибута у вашем обавештењу, ви у суштини дате обавештењу јединствени ИД. Два обавештења не могу постојати заједно ако имају исту ознаку. Уместо тога, најновије обавештење ће заменити старије обавештење.

Размотрите наш претходни пример дугмета (без ознаке). Ако бисте кликнули на дугме три пута узастопно, појавиће се три обавештења и они ће се наслагати једно на друго. Сада рецимо да сте додали следећу ознаку у обавештење:

конст нотифицатион = Нова Обавештење („Пример обавештења“, { 
 тело: „Ово је више текста“,
 ознака: "Моја нова ознака"
})

Ако поново кликнете на дугме, појавиће се само једно обавештење. Сваки следећи клик ће заменити претходно обавештење, тако да ће се приказати само једно обавештење без обзира колико пута кликнете на дугме. Ово је корисно ако желите да додате динамичке податке (нпр Матх.рандом()) телу:

конст нотифицатион = Нова Обавештење („Пример обавештења“, { 
 тело: Матх.рандом()
 икона: "лого.пнг",
 ознака: "Ознака мог тела"
})

Сваки пут када кликнете на дугме, појавиће се нови број. Користите својство ознаке ако желите да препишете тренутно обавештење новим информацијама унутар њега. У апликацији за размену порука, на пример, можете да користите атрибут ознаке да бисте заменили обавештење новим порукама.

Пример Пусх обавештења помоћу ЈаваСцрипт-а

Следећи пример открива сваки пут када изгубите фокус на својој страници (тј. када затворите страницу или отворите нову картицу). У овом случају, код шаље обавештење тражећи да вратите:

дозволити обавештење
документ.аддЕвентЛистенер("промена видљивости", ()=> {
ако(документ.висибилитиСтате "сакривен") {
 нотифицатион = Нова Обавештење ("Врати молим те", {
 тело: „Немој још да одлазиш :(“
 ознака: "Врати се"
 })
 } друго {
 нотифицатион.цлосе()
 }
})

Кад год изгубите фокус на тој страници, добићете обавештење у којем се од вас тражи да се вратите на страницу. Али када се вратите на страницу, друго блок се извршава, што затвара пусх обавештење. Ова техника је одлична у ситуацијама када желите да дате кориснику неку врсту информација након што напустите своју страницу.

Сазнајте више о ЈаваСцрипт-у

Обавештење о догађају је само једна од бројних функција које можете пронаћи у ЈаваСцрипт-у. Да бисте били заиста добри са обавештењима, прво морате да схватите основне језичке карактеристике и синтаксу ЈаваСцрипт-а. Прављење једноставних игара је један од начина на који можете унапредити своје вештине и упознати се са основним концептима језика.