Kā nosūtīt push paziņojumus, izmantojot JavaScript

JavaScript paziņojumi ir veids, kā nosūtīt ziņojumus lietotājiem reāllaikā. Varat tos izmantot, lai paziņotu par savas vietnes atjauninājumiem, jauniem tērzēšanas ziņojumiem, e-pastiem vai jebkādām darbībām sociālajos saziņas līdzekļos. Varat arī izmantot paziņojumus kalendāra atgādinājumiem (piemēram, tuvojas sapulce pakalpojumā Google Meet vai Zoom).

Uzziniet, kā izveidot notikumu paziņojumus JavaScript un nosūtīt tos uz tālruni vai tīmekļa pārlūkprogrammu. Jūs to sasniegsit, izmantojot iebūvētu klienta puses JavaScript — nav nepieciešama ārēja bibliotēka!

Atļaujas pieprasīšana paziņojumu sūtīšanai

Lai izveidotu paziņojumu, jums jāzvana uz Paziņojums klasē, lai izveidotu objektu. Tas nodrošina piekļuvi dažādiem rekvizītiem un metodēm, ko varat izmantot, lai konfigurētu paziņojumu. Taču pirms paziņojuma izveides jums vispirms ir jāpieprasa atļauja no lietotāja.

Šis JavaScript pieprasīs atļauju nosūtīt lietotāja paziņojumus. The pieprasīt atļauju zvans atgriezīs ziņojumu, kas norāda, vai pārlūkprogramma atļauj paziņojumus vai nē:

konst poga = dokumentu.querySelector('poga')
 button.addEventListener("klikšķis", ()=> {
 Notification.requestPermission().then(atļauju => {
 brīdinājums (atļauja)
 })
})

Noklikšķinot uz pogas, jūs varat saņemt brīdinājumu, kurā teikts liegta. Tas nozīmē, ka pārlūkprogramma ir liegusi JavaScript sūtīt paziņojumus par notikumiem. Atļaujas statuss ir liegta gadījumiem, kad lietotājs ir nepārprotami liedzis vietnēm sūtīt paziņojumus (izmantojot pārlūkprogrammas iestatījumus) vai lietotājs sērfo inkognito režīmā.

Šādos gadījumos labāk ir ievērot lietotāja lēmumu par paziņojumu noraidīšanu, un jums vajadzētu atturēties no turpmākas viņu apgrūtināšanas.

Pamata paziņojumu sūtīšana

Jūs izveidojat pašpiegādes paziņojumu, izveidojot a Paziņojums objektu ar jauno atslēgvārdu. Lai uzzinātu vairāk par objektu orientētu programmēšanu, varat skatīt mūsu ceļvedi kā izveidot klases JavaScript.

Tā kā jūs sūtāt paziņojumus tikai tad, ja tiek piešķirta atļauja, jums tie ir jāiekļauj ja pārbaudiet.

konst poga = dokumentu.querySelector('poga')
button.addEventListener("klikšķis", ()=> {
 Notification.requestPermission().then(ilgviļņi => {
ja(ilgviļņi 'piešķirts') {
jauns Paziņojums("Paziņojuma piemērs")
 }
 })
})

Noklikšķiniet uz pogas, un tīmekļa pārlūkprogrammas apakšējā labajā stūrī tiks parādīts informatīvs paziņojums ar norādīto tekstu.

Šis ir visvienkāršākais paziņojumu izveides veids, un tas darbojas gan tālrunī, gan datorā. Apskatīsim dažus papildu paziņojumu rekvizītus.

Papildu paziņojumu rekvizīti

Veidojot paziņojumu objektu, papildus paziņojuma nosaukumam varat arī nodot konstruktoram opciju argumentu. Šim opciju argumentam ir jābūt objektam. Šeit varat pievienot vairākas opcijas, lai pielāgotu paziņojumu.

Ķermeņa īpašums

Pirmais īpašums, kas jums jāzina, ir ķermeni īpašums. Jūs to izmantotu, lai savam paziņojumam pievienotu pamattekstu, parasti lai sniegtu vairāk informācijas teksta veidā. Šeit ir vienkāršs piemērs:

konst poga = dokumentu.querySelector('poga')
button.addEventListener("klikšķis", ()=> {
 Notification.requestPermission().then(ilgviļņi => {
ja(ilgviļņi 'piešķirts') {
jauns Paziņojums("Paziņojuma piemērs", {
 korpuss: "Šis ir vairāk teksta",
 })
 }
 })
})

Ja palaižat šo kodu, pamatteksts tiks parādīts pašpiegādes paziņojumā zem Paziņojuma piemērs galvene.

Datu atribūts

Bieži vien, iespējams, vēlēsities paziņojumiem pievienot pielāgotus datus. Ja atļauja ir liegta, iespējams, vēlaties parādīt konkrētu kļūdas ziņojumu vai saglabāt datus, ko saņēmāt no API. Visos šādos gadījumos varat izmantot datus īpašumu, lai savam paziņojumam pievienotu pielāgotus datus.

button.addEventListener("klikšķis", ()=> {
 Notification.requestPermission().then(ilgviļņi => {
ja(ilgviļņi 'piešķirts') {
konst paziņojums = jauns Paziņojums("Paziņojuma piemērs", {
 korpuss: "Šis ir vairāk teksta",
 dati: {Sveiki: "pasaule"}
 })

 brīdinājums (notification.data.hello)
 }
 })
})

Jūs varat piekļūt datiem no datus rekvizītu līdzīgi kā parādīts iepriekš minētajā koda blokā (iekšpusē brīdinājums ()).

Varat arī piesaistīt notikumu klausītājus saviem paziņojumiem. Piemēram, tālāk norādītais notikumu uztvērējs tiek izpildīts ikreiz, kad aizverat pašpiegādes paziņojumu. Atzvanīšanas funkcija vienkārši reģistrē pielāgoto ziņojumu.

konst paziņojums = jauns Paziņojums("Paziņojuma piemērs", { 
 korpuss: "Šis ir vairāk teksta",
 dati: {Sveiki: "pasaule"} 
})
paziņojumu. addEventListener("aizvērt", e => {
konsole.log (e.target.data.hello)
})

Tas ir lielisks veids, kā nodot datus, ja jums ir jādara kaut kas, kad kāds aizver paziņojumu vai noklikšķina uz tā. Neatkarīgi no aizveriet notikumu (kas tiek izpildīts, aizverot paziņojumu), jums tie jāsaglabā pasākuma klausītāji Tavā prātā:

• parādīt: tiek izpildīts, kad tiek parādīts paziņojums.
• klikšķis: tiek izpildīts, kad lietotājs noklikšķina jebkurā paziņojuma vietā.
• kļūda: tiek izpildīts, ja liedzat JavaScript atļauju nosūtīt paziņojumus.

Ikona Īpašums

The ikonu rekvizīts ir paredzēts ikonas pievienošanai push paziņojumam. Pieņemot, ka jums ir ikonas logotips ar nosaukumu logo.png pašreizējā direktorijā varat to izmantot savos paziņojumos, piemēram:

konst paziņojums = jauns Paziņojums("Paziņojuma piemērs", { 
 ikona: "logo.png"
})

Ja jums ir grūtības izveidot saiti uz saviem failiem, tas ir jādara izprast relatīvo URL un absolūto URL darbību.

Kad saglabājat failu, atsvaidziniet pārlūkprogrammu un noklikšķiniet uz pogas, paziņojuma galvenes un pamatteksta kreisajā pusē tiks parādīts attēls.

Taga atribūts

Kad iestatāt tagu atribūtu savā paziņojumā, jūs būtībā piešķirat paziņojumam unikālu ID. Divi paziņojumi nevar pastāvēt kopā, ja tiem ir viena atzīme. Tā vietā jaunākais paziņojums pārrakstīs vecāku paziņojumu.

Apsveriet mūsu iepriekšējās pogas piemēru (bez taga). Ja trīs reizes ātri pēc kārtas noklikšķināt uz pogas, tiks parādīti trīs paziņojumi un tie tiks sakrauti viens virs otra. Tagad pieņemsim, ka paziņojumam pievienojāt šādu atzīmi:

konst paziņojums = jauns Paziņojums("Paziņojuma piemērs", { 
 korpuss: "Šis ir vairāk teksta",
 tags: "Mana jaunā atzīme"
})

Ja vēlreiz noklikšķiniet uz pogas, tiks parādīts tikai viens paziņojumu lodziņš. Katrs nākamais klikšķis pārrakstīs iepriekšējo paziņojumu, tāpēc tiks parādīts tikai viens paziņojums neatkarīgi no tā, cik reižu noklikšķināsiet uz pogas. Tas ir noderīgi, ja vēlaties pievienot dinamiskus datus (piemēram, Math.random()) ķermenim:

konst paziņojums = jauns Paziņojums("Paziņojuma piemērs", { 
 korpuss: Matemātika.random()
 ikona: "logo.png",
 tags: "Mana ķermeņa atzīme"
})

Katru reizi, noklikšķinot uz pogas, parādīsies jauns numurs. Izmantojiet taga rekvizītu, ja vēlaties pārrakstīt pašreizējo paziņojumu ar jaunu informāciju. Piemēram, ziņojumapmaiņas lietotnē varat izmantot atzīmes atribūtu, lai pārrakstītu paziņojumu ar jauniem ziņojumiem.

Push paziņojumu piemērs, izmantojot JavaScript

Tālāk sniegtajā piemērā tiek noteikts, kad jūs zaudējat fokusu uz savu lapu (t.i., kad aizverat lapu vai atverat jaunu cilni). Šādā gadījumā kods nosūta paziņojumu, aicinot atgriezties:

ļaut paziņojumu
dokumentu.addEventListener("redzamības maiņa", ()=> {
ja(dokumentu.visibilityState "slēpts") {
 paziņojums = jauns Paziņojums("Atnāc lūdzu", {
 korpuss: "Vēl neej prom :("
 tags: "Atgriezies"
 })
 } cits {
 notification.close()
 }
})

Ikreiz, kad zaudēsiet fokusu uz šo lapu, jūs saņemsit paziņojumu ar aicinājumu atgriezties lapā. Bet, kad atgriezīsities lapā, cits tiek izpildīts bloks, kas aizver push paziņojumu. Šis paņēmiens ir lieliski piemērots situācijās, kad vēlaties sniegt lietotājam kādu informāciju pēc lapas aiziešanas.

Uzziniet vairāk par JavaScript

Paziņojumi par notikumu ir tikai viena no daudzajām JavaScript funkcijām. Lai ļoti labi strādātu ar paziņojumiem, vispirms ir jāsaprot galvenās valodas funkcijas un JavaScript sintakse. Vienkāršu spēļu veidošana ir viens no veidiem, kā uzlabot savas prasmes un iepazīties ar valodas pamatjēdzieniem.