Kako pošiljati potisna obvestila z JavaScriptom

Obvestila JavaScript so način za pošiljanje sporočil vašim uporabnikom v realnem času. Uporabite jih lahko za obveščanje o posodobitvah spletnega mesta, novih sporočilih v klepetu, e-pošti ali kakršnih koli dejavnostih v družabnih medijih. Obvestila lahko uporabite tudi za koledarske opomnike (kot je bližajoči se sestanek v storitvi Google Meet ali Zoom).

Naučite se ustvariti obvestila o dogodkih v JavaScriptu in jih poslati v telefon ali spletni brskalnik. To boste dosegli z vgrajenim JavaScriptom na strani odjemalca – zunanja knjižnica ni potrebna!

Zahtevam dovoljenje za pošiljanje obvestil

Če želite ustvariti obvestilo, morate poklicati Obvestilo razred za ustvarjanje predmeta. Omogoča vam dostop do različnih lastnosti in metod, s katerimi lahko konfigurirate svoje obvestilo. Toda preden ustvarite obvestilo, boste morali od uporabnika najprej zahtevati dovoljenje.

Naslednji JavaScript bo zahteval dovoljenje za pošiljanje uporabniških obvestil. The requestPermission klic bo vrnil sporočilo, ki označuje, ali brskalnik dovoljuje obvestila ali ne:

konst gumb = dokument.querySelector('gumb')
 button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(dovoljenje => {
 opozorilo (dovoljenje)
 })
})

Ko kliknete na gumb, boste morda prejeli opozorilo, ki pravi zanikal. To pomeni, da je brskalnik JavaScriptu onemogočil pošiljanje obvestil o dogodkih. Stanje dovoljenja je zanikal za primere, ko je uporabnik izrecno preprečil spletnim mestom pošiljanje obvestil (preko nastavitev brskalnika) ali pa uporabnik brska v načinu brez beleženja zgodovine.

V takšnih primerih je bolje, da spoštujete uporabnikovo odločitev o zavrnjenih obvestilih in se vzdržite nadaljnjega nadlegovanja.

Pošiljanje osnovnih obvestil

Potisno obvestilo ustvarite tako, da ustvarite a Obvestilo objekt z novo ključno besedo. Za globok potop v objektno usmerjeno programiranje si lahko ogledate naš vodnik na kako ustvariti razrede v JavaScriptu.

Ker bi obvestila pošiljali le, če bi bilo dovoljenje odobreno, bi ga morali zaviti v če preverite.

konst gumb = dokument.querySelector('gumb')
button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
če(perm 'odobreno') {
novo Obvestilo ("Primer obvestila")
 }
 })
})

Kliknite na gumb in v spodnjem desnem kotu spletnega brskalnika boste prejeli potisno obvestilo z določenim besedilom.

To je najosnovnejši način za ustvarjanje obvestil in deluje tako v telefonu kot v računalniku. Oglejmo si nekaj naprednih lastnosti obvestil.

Lastnosti naprednih obvestil

Poleg naslova obvestila lahko pri ustvarjanju objekta obvestila konstruktorju posredujete tudi argument možnosti. Ta argument možnosti mora biti predmet. Tukaj lahko dodate več možnosti za prilagajanje obvestila.

Lastnina telesa

Prva lastnost, ki bi jo morali poznati, je telo premoženje. To bi uporabili za dodajanje telesa obvestilu, običajno za prenos več informacij v obliki besedila. Tukaj je preprost primer:

konst gumb = dokument.querySelector('gumb')
button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
če(perm 'odobreno') {
novo Obvestilo ("Primer obvestila", {
 telo: "To je več besedila",
 })
 }
 })
})

Če zaženete to kodo, bo telo besedila prikazano v potisnem obvestilu pod Primer obvestila glava.

Atribut podatkov

Pogosto boste morda želeli obvestilom dodati podatke po meri. Morda želite prikazati določeno sporočilo o napaki, če je dovoljenje zavrnjeno, ali shraniti podatke, ki ste jih prejeli od API-ja. Za vse take primere lahko uporabite podatke lastnost za dodajanje podatkov po meri vašemu obvestilu.

button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
če(perm 'odobreno') {
konst obvestilo = novo Obvestilo ("Primer obvestila", {
 telo: "To je več besedila",
 podatki: {zdravo: "svet"}
 })

 opozorilo (notification.data.hello)
 }
 })
})

Do podatkov lahko dostopate iz podatke podobno kot je prikazano v zgornjem kodnem bloku (znotraj opozorilo()).

Na svoja obvestila lahko povežete tudi poslušalce dogodkov. Naslednji poslušalec dogodkov se na primer izvede vsakič, ko zaprete potisno obvestilo. Funkcija povratnega klica preprosto zabeleži sporočilo po meri.

konst obvestilo = novo Obvestilo ("Primer obvestila", { 
 telo: "To je več besedila",
 podatki: {zdravo: "svet"} 
})
obvestilo. addEventListener("blizu", e => {
konzola.log (e.target.data.hello)
})

To je odličen način za posredovanje podatkov, če morate nekaj narediti, ko nekdo zapre obvestilo ali ga klikne. Poleg blizu dogodek (ki se izvede, ko zaprete obvestilo), jih morate obdržati poslušalci dogodkov v tvojih mislih:

• pokazati: Izvede se, ko se prikaže obvestilo.
• kliknite: Izvede se, ko uporabnik klikne kjer koli v obvestilu.
• napaka: Izvede se, ko JavaScriptu zavrnete dovoljenje za pošiljanje obvestil.

Ikona Lastnina

The ikona lastnost je za dodajanje ikone potisnemu obvestilu. Ob predpostavki, da imate poimenovan logotip ikone logo.png v trenutnem imeniku, ga lahko uporabite v svojih obvestilih takole:

konst obvestilo = novo Obvestilo ("Primer obvestila", { 
 ikona: "logotip.png"
})

Če imate težave s povezovanjem do svojih datotek, morate razumeti delovanje relativnih in absolutnih URL-jev.

Ko shranite datoteko, osvežite brskalnik in kliknete gumb, bo obvestilo imelo sliko, prikazano na levi strani glave in telesa.

Atribut oznake

Ko nastavite oznaka v svojem obvestilu, v bistvu dajete obvestilu edinstven ID. Dve obvestili ne moreta obstajati skupaj, če imata isto oznako. Namesto tega bo najnovejše obvestilo prepisalo starejše obvestilo.

Razmislite o našem prejšnjem primeru gumba (brez oznake). Če bi gumb kliknili trikrat zaporedoma, se bodo prikazala tri obvestila, ki bodo naložena eno na drugo. Zdaj pa recimo, da ste obvestilu dodali to oznako:

konst obvestilo = novo Obvestilo ("Primer obvestila", { 
 telo: "To je več besedila",
 oznaka: "Moja nova oznaka"
})

Če bi gumb kliknili znova, se bo prikazalo samo eno obvestilno polje. Vsak naslednji klik bo prepisal prejšnje obvestilo, tako da bo prikazano samo eno obvestilo, ne glede na to, kolikokrat kliknete gumb. To je uporabno, če želite dodati dinamične podatke (npr Math.random()) na telo:

konst obvestilo = novo Obvestilo ("Primer obvestila", { 
 telo: matematika.naključen()
 ikona: "logotip.png",
 oznaka: "Oznaka mojega telesa"
})

Vsakič, ko kliknete gumb, se prikaže nova številka. Uporabite lastnost oznake, če želite prepisati trenutno obvestilo z novimi informacijami v njem. V aplikaciji za sporočanje lahko na primer uporabite atribut oznake, da prepišete obvestilo z novimi sporočili.

Primer potisnega obvestila z uporabo JavaScripta

Naslednji primer zazna vsakič, ko izgubite fokus na svoji strani (tj. ko zaprete stran ali odprete nov zavihek). V tem primeru koda pošlje obvestilo, da se vrnete:

pustiti obvestilo
dokument.addEventListener("sprememba vidljivosti", ()=> {
če(dokument.visibilityState "skrit") {
 obvestilo = novo Obvestilo ("Pridi nazaj prosim", {
 telo: "Ne odidi še :("
 oznaka: "Pridi nazaj"
 })
 } drugače {
 notification.close()
 }
})

Kadarkoli izgubite fokus na tej strani, boste prejeli obvestilo, da se vrnete na stran. Ko pa se vrnete na stran, se drugače blok izvede, kar zapre potisno obvestilo. Ta tehnika je odlična v situacijah, ko želite uporabniku dati kakšno informacijo, ko zapusti vašo stran.

Več o JavaScriptu

Obveščanje o dogodkih je le ena od številnih funkcij, ki jih lahko najdete v JavaScriptu. Če želite biti res dobri z obvestili, morate najprej razumeti temeljne jezikovne funkcije in sintakso JavaScripta. Sestavljanje preprostih iger je eden od načinov, s katerim lahko izboljšate svoje sposobnosti in se seznanite z osnovnimi koncepti jezika.