Kuidas saata tõukemärguandeid JavaScriptiga

JavaScripti teatised on viis kasutajatele reaalajas sõnumeid saata. Saate neid kasutada oma veebisaidi uuendustest, uutest vestlussõnumitest, meilidest või sotsiaalmeedia tegevustest teavitamiseks. Märguandeid saate kasutada ka kalendri meeldetuletuste jaoks (nt lähenev koosolek teenuses Google Meet või Zoom).

Siit saate teada, kuidas luua JavaScriptis sündmuste märguandeid ja saata need oma telefoni või veebibrauserisse. Selle saavutate sisseehitatud kliendipoolse JavaScripti abil – välist teeki pole vaja!

Teatiste saatmise loa taotlemine

Teatise loomiseks peate helistama numbril Teavitus klassis objekti loomiseks. See annab teile juurdepääsu erinevatele atribuutidele ja meetoditele, mida saate kasutada teatise konfigureerimiseks. Kuid enne teatise loomist peate esmalt taotlema kasutajalt luba.

Järgmine JavaScript taotleb luba kasutajate märguannete saatmiseks. The

taotle luba kõne tagastab sõnumi, mis näitab, kas brauser lubab märguandeid või mitte:

konst nupp = dokument.querySelector('nupp')
 button.addEventListener("klõpsake", ()=> {
 Notification.requestPermission().then(luba => {
 hoiatus (luba)
 })
})

Kui klõpsate nupul, võite saada hoiatuse, mis ütleb eitatud. See tähendab, et brauser on keelanud JavaScriptil sündmuste märguannete saatmise. Loa olek on eitatud juhtudel, kui kasutaja on selgesõnaliselt keelanud saitidel märguandeid saata (brauseri seadete kaudu) või kui kasutaja surfab inkognito režiimis.

Sellistel juhtudel on parem austada kasutaja otsust keelduda teavitustest ja hoiduda nende edasisest tülitamisest.

Põhiteatiste saatmine

Tõuketeatise loomiseks loote a Teavitus objekti uue märksõnaga. Objektorienteeritud programmeerimisse sügavamaks sukeldumiseks võite vaadata meie juhendit kuidas JavaScriptis klasse luua.

Kuna saadaksite märguandeid ainult siis, kui luba on antud, peate selle pakkima kui Kontrollima.

konst nupp = dokument.querySelector('nupp')
button.addEventListener("klõpsake", ()=> {
 Notification.requestPermission().then(perm => {
kui(perm "antud") {
uus teatis("Teatise näide")
 }
 })
})

Klõpsake nuppu ja teie veebibrauseri paremas alanurgas kuvatakse tõuketeade koos määratud tekstiga.

See on kõige elementaarsem viis märguannete loomiseks ja see töötab nii teie telefonis kui ka arvutis. Vaatame mõningaid täpsemaid teavitusatribuute.

Täpsemate teavituste atribuudid

Lisaks teatise pealkirjale saate teavitusobjekti loomisel konstruktorile edastada ka valikute argumendi. See valikute argument peab olema objekt. Siin saate lisada teatise kohandamiseks mitu valikut.

Keha omadus

Esimene vara, mida peaksite teadma, on keha vara. Saate seda kasutada teatisele kehaosa lisamiseks, tavaliselt selleks, et edastada rohkem teavet teksti kujul. Siin on lihtne näide:

konst nupp = dokument.querySelector('nupp')
button.addEventListener("klõpsake", ()=> {
 Notification.requestPermission().then(perm => {
kui(perm "antud") {
uus teatis("Teatise näide", {
 keha: "See on rohkem teksti",
 })
 }
 })
})

Kui käivitate selle koodi, kuvatakse põhitekst tõukemärguande all Teatise näide päis.

Andmete atribuut

Sageli võite soovida märguannetele kohandatud andmeid lisada. Võib-olla soovite kuvada konkreetse tõrketeate, kui luba on keelatud, või salvestada API-lt saadud andmeid. Kõigil sellistel juhtudel saate kasutada andmeid atribuut, et lisada teatisele kohandatud andmed.

button.addEventListener("klõpsake", ()=> {
 Notification.requestPermission().then(perm => {
kui(perm "antud") {
konst teade = uus teatis("Teatise näide", {
 keha: "See on rohkem teksti",
 andmed: {Tere: "maailm"}
 })

 hoiatus (notification.data.hello)
 }
 })
})

Andmetele pääsete juurde aadressilt andmeid omadus sarnaselt ülaltoodud koodiplokis näidatule ( hoiatus ()).

Samuti saate sündmuste kuulajaid oma märguannetega siduda. Näiteks käivitab järgmine sündmustekuulaja tõuketeatise sulgemisel. Tagasihelistamise funktsioon lihtsalt logib kohandatud sõnumi.

konst teade = uus teatis("Teatise näide", { 
 keha: "See on rohkem teksti",
 andmed: {Tere: "maailm"} 
})
teatis. addEventListener("Sulge", e => {
konsool.log (e.target.data.hello)
})

See on suurepärane viis andmete edastamiseks, kui teil on vaja midagi ette võtta, kui keegi teatise sulgeb või sellel klõpsab. Peale selle Sulge sündmuse (mis käivitub teatise sulgemisel), peaksite need alles hoidma sündmuste kuulajad Sinu mõtteis:

• näidata: Käivitub, kui kuvatakse teatis.
• klõpsa: Käivitub, kui kasutaja klõpsab teatise mis tahes kohas.
• viga: Käivitub, kui keelate JavaScripti loa teadete saatmiseks.

Ikoon Atribuut

The ikooni atribuut on mõeldud tõuketeatisele ikooni lisamiseks. Eeldusel, et teil on nimega ikooni logo logo.png praeguses kataloogis saate seda oma teavitustes kasutada järgmiselt:

konst teade = uus teatis("Teatise näide", { 
 ikoon: "logo.png"
})

Kui teil on raskusi failidele linkimisega, peate seda tegema mõista suhteliste URL-ide ja absoluutsete URL-ide toimimist.

Kui salvestate faili, värskendate brauserit ja klõpsate nuppu, kuvatakse teatise päise ja keha vasakus servas pilt.

Sildi atribuut

Kui määrate tag atribuut teatises, annate teatisele põhimõtteliselt kordumatu ID. Kaks märguannet ei saa koos eksisteerida, kui neil on sama silt. Selle asemel kirjutab uusim teatis vanema teatise üle.

Mõelge meie eelmisele nupule (ilma sildita). Kui klõpsasite nuppu kolm korda järjest kiiresti, kuvatakse kolm märguannet ja need virnatakse üksteise peale. Oletame nüüd, et lisasite teatisele järgmise sildi:

konst teade = uus teatis("Teatise näide", { 
 keha: "See on rohkem teksti",
 silt: "Minu uus silt"
})

Kui klõpsate nuppu uuesti, kuvatakse ainult üks teavituskast. Iga järgmine klõps kirjutab eelteatise üle, nii et olenemata sellest, mitu korda nupul klõpsate, kuvatakse ainult üks teatis. See on kasulik, kui soovite lisada dünaamilisi andmeid (nt Math.random()) kehale:

konst teade = uus teatis("Teatise näide", { 
 keha: matemaatika.random()
 ikoon: "logo.png",
 silt: "Minu keha silt"
})

Iga kord, kui klõpsate nuppu, kuvatakse uus number. Kasutage sildi atribuuti, kui soovite praeguse teatise uue teabega üle kirjutada. Näiteks sõnumirakenduses saate märguande uute sõnumitega üle kirjutada.

JavaScripti kasutava push-teavituse näide

Järgmine näide tuvastab iga kord, kui kaotate oma lehel fookuse (st kui sulgete lehe või avate uue vahelehe). Sel juhul saadab kood teatise, milles palutakse teil naasta:

lase teatis
dokument.addEventListener("nähtavus-muutus", ()=> {
kui(dokument.visibilityState "peidetud") {
 teade = uus teatis("Tule tagasi, palun", {
 keha: "Ära veel lahku :("
 silt: "Tule tagasi"
 })
 } muidu {
 Notification.close()
 }
})

Kui kaotate sellele lehele keskendumise, saate märguande, mis palub teil lehele tagasi tulla. Kui aga lehele tagasi pöördute, muidu blokk käivitub, mis sulgeb tõuketeatise. See tehnika sobib suurepäraselt olukordades, kus soovite pärast lehelt lahkumist kasutajale mingit teavet anda.

Lisateave JavaScripti kohta

Sündmuse teatis on vaid üks paljudest JavaScripti funktsioonidest. Selleks, et teavitustega hästi hakkama saada, peate esmalt mõistma JavaScripti põhilisi keelefunktsioone ja süntaksit. Lihtsate mängude loomine on üks viise, mille kaudu saate oma oskusi tõsta ja keele põhimõistetega kurssi viia.