Kako poslati push obavijesti s JavaScriptom

JavaScript obavijesti način su slanja poruka vašim korisnicima u stvarnom vremenu. Možete ih koristiti za obavještavanje o ažuriranjima svoje web stranice, novim chat porukama, e-porukama ili bilo kojim aktivnostima na društvenim mrežama. Također možete koristiti obavijesti za kalendarske podsjetnike (kao što je sastanak koji se približava na Google Meetu ili Zoomu).

Naučite kako izraditi obavijesti o događajima u JavaScriptu i poslati ih na svoj telefon ili web preglednik. To ćete postići korištenjem ugrađenog JavaScripta na strani klijenta—nije potrebna vanjska biblioteka!

Traženje dopuštenja za slanje obavijesti

Za izradu obavijesti potrebno je nazvati Obavijest klasa za stvaranje objekta. Omogućuje vam pristup raznim svojstvima i metodama koje možete koristiti za konfiguraciju svoje obavijesti. Ali prije nego što izradite obavijest, morat ćete prvo zatražiti dopuštenje od korisnika.

Sljedeći JavaScript će zahtijevati dozvolu za slanje korisničkih obavijesti. The zahtjev za dopuštenje poziv će vratiti poruku koja pokazuje dopušta li preglednik obavijesti ili ne:

konst gumb = dokument.querySelector('dugme')
 button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(dopuštenje => {
 upozorenje (dopuštenje)
 })
})

Kada kliknete na gumb, možete dobiti upozorenje koje kaže odbijeno. To znači da je preglednik zabranio JavaScriptu slanje obavijesti o događajima. Status dopuštenja je odbijeno za slučajeve kada je korisnik izričito spriječio stranice da šalju obavijesti (putem postavki preglednika) ili korisnik surfa u anonimnom načinu rada.

U takvim je slučajevima bolje poštivati ​​odluku korisnika o odbijanju obavijesti i suzdržati se od daljnjeg gnjavljanja.

Slanje osnovnih obavijesti

Push obavijest stvarate stvaranjem a Obavijest objekt s novom ključnom riječi. Za dublje poniranje u objektno orijentirano programiranje, možete pogledati naš vodič na kako stvoriti klase u JavaScriptu.

Budući da biste slali obavijesti samo ako imate dopuštenje, trebali biste je zamotati unutar ako ček.

konst gumb = dokument.querySelector('dugme')
button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
ako(dopušteno 'dopušteno') {
novi Obavijest("Primjer obavijesti")
 }
 })
})

Kliknite na gumb i dobit ćete push obavijest u donjem desnom kutu web preglednika s navedenim tekstom.

Ovo je najosnovniji način za stvaranje obavijesti, a funkcionira na vašem telefonu kao i na računalu. Pogledajmo neka napredna svojstva obavijesti.

Svojstva naprednih obavijesti

Osim naslova obavijesti, također možete prenijeti argument opcija konstruktoru prilikom stvaranja objekta obavijesti. Ovaj argument opcija mora biti objekt. Ovdje možete dodati nekoliko opcija za prilagodbu obavijesti.

Svojstvo tijela

Prvo svojstvo koje biste trebali znati je tijelo vlasništvo. Ovo biste koristili za dodavanje tijela obavijesti, obično za prenošenje više informacija u obliku teksta. Evo jednostavnog primjera:

konst gumb = dokument.querySelector('dugme')
button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
ako(dopušteno 'dopušteno') {
novi Obavijest("Primjer obavijesti", {
 tijelo: "Ovo je više teksta",
 })
 }
 })
})

Ako pokrenete ovaj kod, tekst tijela prikazat će se u push obavijesti, ispod Primjer obavijesti Zaglavlje.

Atribut podataka

Često ćete možda htjeti dodati prilagođene podatke u obavijesti. Možda želite prikazati određenu poruku o pogrešci ako je dopuštenje odbijeno ili pohraniti podatke koje ste primili od API-ja. Za sve takve slučajeve možete koristiti podaci svojstvo za dodavanje prilagođenih podataka vašoj obavijesti.

button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
ako(dopušteno 'dopušteno') {
konst obavijest = novi Obavijest("Primjer obavijesti", {
 tijelo: "Ovo je više teksta",
 podaci: {zdravo: "svijet"}
 })

 upozorenje (obavijest.podaci.zdravo)
 }
 })
})

Podacima možete pristupiti iz podaci svojstvo slično prikazanom u gornjem bloku koda (unutar upozorenje()).

Također možete vezati slušatelje događaja na svoje obavijesti. Na primjer, sljedeći slušatelj događaja izvršava se svaki put kada zatvorite push obavijest. Funkcija povratnog poziva jednostavno bilježi prilagođenu poruku.

konst obavijest = novi Obavijest("Primjer obavijesti", { 
 tijelo: "Ovo je više teksta",
 podaci: {zdravo: "svijet"} 
})
obavijest. addEventListener("Zatvoriti", e => {
konzola.log (e.target.data.hello)
})

Ovo je izvrstan način za prosljeđivanje podataka ako trebate nešto učiniti kada netko zatvori obavijest ili klikne na nju. Osim na Zatvoriti događaja (koji se izvršava kada zatvorite obavijest), trebali biste ih zadržati slušatelji događaja u tvojim mislima:

• pokazati: Izvršava se kada se prikaže obavijest.
• klik: Izvršava se kada korisnik klikne bilo gdje u obavijesti.
• greška: Izvršava se kada odbijete JavaScript dozvolu za slanje obavijesti.

Ikona Svojstvo

The ikona svojstvo je za dodavanje ikone u push obavijest. Pod pretpostavkom da imate naziv logotipa ikone logo.png u trenutnom direktoriju, možete ga koristiti u svojim obavijestima ovako:

konst obavijest = novi Obavijest("Primjer obavijesti", { 
 ikona: "logo.png"
})

Ako se mučite s povezivanjem na svoje datoteke, morate to učiniti razumjeti rad relativnih URL-ova i apsolutnih URL-ova.

Kada spremite datoteku, osvježite preglednik i kliknete gumb, obavijest će imati sliku prikazanu na lijevoj strani zaglavlja i tijela.

Atribut oznake

Kada postavite označiti u svojoj obavijesti, u osnovi dajete obavijesti jedinstveni ID. Dvije obavijesti ne mogu postojati zajedno ako imaju istu oznaku. Umjesto toga, najnovija obavijest prebrisat će stariju obavijest.

Razmotrite naš prethodni primjer gumba (bez oznake). Ako kliknete na gumb tri puta uzastopno, pojavit će se tri obavijesti koje će se naslagati jedna na drugu. Recimo da ste dodali sljedeću oznaku u obavijest:

konst obavijest = novi Obavijest("Primjer obavijesti", { 
 tijelo: "Ovo je više teksta",
 označiti: "Moja nova oznaka"
})

Ako ponovno kliknete na gumb, pojavit će se samo jedan okvir s obavijestima. Svaki sljedeći klik će prebrisati prethodnu obavijest, tako da će se prikazati samo jedna obavijest bez obzira koliko puta pritisnete gumb. Ovo je korisno ako želite dodati dinamičke podatke (kao što je Math.random()) na tijelo:

konst obavijest = novi Obavijest("Primjer obavijesti", { 
 tijelo: matematika.random()
 ikona: "logo.png",
 označiti: "Oznaka mog tijela"
})

Svaki put kada kliknete na gumb, pojavit će se novi broj. Koristite svojstvo oznake ako želite prebrisati trenutnu obavijest novim informacijama unutar nje. U aplikaciji za razmjenu poruka, na primjer, možete koristiti atribut oznake da biste prebrisali obavijest novim porukama.

Primjer push obavijesti pomoću JavaScripta

Sljedeći primjer otkriva svaki put kad izgubite fokus na svojoj stranici (tj. kada zatvorite stranicu ili otvorite novu karticu). U tom slučaju kod šalje obavijest tražeći od vas da se vratite:

neka obavijest
dokument.addEventListener("promjena vidljivosti", ()=> {
ako(dokument.visibilityState "skriven") {
 obavijest = novi Obavijest("Vrati se molim te", {
 tijelo: "Nemoj još otići :("
 označiti: "Vrati se"
 })
 } drugo {
 obavijest.close()
 }
})

Kad god izgubite fokus na toj stranici, dobit ćete obavijest s upitom da se vratite na stranicu. Ali kada se vratite na stranicu, drugo blok se izvršava, što zatvara push obavijest. Ova tehnika je izvrsna u situacijama kada korisniku želite dati neku vrstu informacije nakon što napusti vašu stranicu.

Saznajte više o JavaScriptu

Obavijest o događaju samo je jedna od brojnih značajki koje možete pronaći u JavaScriptu. Kako biste stvarno bili dobri s obavijestima, prvo morate shvatiti temeljne jezične značajke i sintaksu JavaScripta. Izrada jednostavnih igara jedan je od načina na koji možete poboljšati svoje vještine i upoznati se s osnovnim konceptima jezika.