Hvordan sende push-varsler med JavaScript

JavaScript-varsler er en måte å sende meldinger til brukerne dine i sanntid. Du kan bruke dem til å varsle om nettstedoppdateringer, nye chat-meldinger, e-poster eller sosiale medieaktiviteter. Du kan også bruke varsler for kalenderpåminnelser (for eksempel et møte som nærmer seg på Google Meet eller Zoom).

Lær hvordan du oppretter hendelsesvarsler i JavaScript og sender dem til telefonen eller nettleseren din. Du oppnår dette ved å bruke innebygd JavaScript på klientsiden – ingen eksternt bibliotek kreves!

Ber om tillatelse til å sende varsler

For å opprette et varsel, må du ringe til Melding klasse for å lage et objekt. Den gir deg tilgang til ulike egenskaper og metoder som du kan bruke til å konfigurere varslingen. Men før du oppretter et varsel, må du først be om tillatelse fra brukeren.

Følgende JavaScript vil be om tillatelse til å sende brukervarsler. De

requestPermission call vil returnere en melding som indikerer om nettleseren tillater varsler eller ikke:

konst knapp = dokument.querySelector('knapp')
 button.addEventListener("klikk", ()=> {
 Notification.requestPermission().then(tillatelse => {
 varsel (tillatelse)
 })
})

Når du klikker på knappen, kan du få et varsel som sier nektet. Dette betyr at nettleseren har nektet JavaScript fra å sende hendelsesvarsler. Tillatelsesstatusen er nektet for tilfeller der brukeren eksplisitt har forhindret sidene å sende varsler (gjennom nettleserinnstillinger) eller brukeren surfer i inkognitomodus.

I slike tilfeller er det bedre å respektere brukerens avgjørelse for avviste varsler, og du bør avstå fra å plage dem ytterligere.

Sende grunnleggende varsler

Du oppretter en push-varsling ved å opprette en Melding objekt med det nye nøkkelordet. For et dypdykk i objektorientert programmering kan du se vår guide på hvordan lage klasser i JavaScript.

Siden du bare sender varsler hvis tillatelse er gitt, må du pakke det inn i en hvis Sjekk.

konst knapp = dokument.querySelector('knapp')
button.addEventListener("klikk", ()=> {
 Notification.requestPermission().then(perm => {
hvis(perm "gitt") {
ny Melding("Eksempel på varsel")
 }
 })
})

Klikk på knappen, og du vil få en push-varsling nederst til høyre i nettleseren din med den angitte teksten.

Dette er den mest grunnleggende måten å lage varsler på, og den fungerer på telefonen så vel som på datamaskinen. La oss se på noen avanserte varslingsegenskaper.

Avanserte varslingsegenskaper

I tillegg til varslingstittelen, kan du også sende et alternativ-argument til konstruktøren når du oppretter varslingsobjektet. Dette alternativ-argumentet må være et objekt. Her kan du legge til flere alternativer for å tilpasse varslingen.

Kroppen Eiendom

Den første egenskapen du bør vite er kropp eiendom. Du vil bruke dette til å legge til en tekst i varselet ditt, vanligvis for å formidle mer informasjon i form av tekst. Her er et enkelt eksempel:

konst knapp = dokument.querySelector('knapp')
button.addEventListener("klikk", ()=> {
 Notification.requestPermission().then(perm => {
hvis(perm "gitt") {
ny Melding("Eksempel på varsel", {
 kropp: "Dette er mer tekst",
 })
 }
 })
})

Hvis du kjører denne koden, vil brødteksten vises i push-varslingen, under Eksempel på melding Overskrift.

Dataattributtet

Ofte vil du kanskje legge til egendefinerte data i varsler. Kanskje du vil vise en bestemt feilmelding hvis tillatelse nektes, eller lagre data du har mottatt fra et API. For alle slike tilfeller kan du bruke data eiendom for å legge til egendefinerte data i varselet ditt.

button.addEventListener("klikk", ()=> {
 Notification.requestPermission().then(perm => {
hvis(perm "gitt") {
konst varsel = ny Melding("Eksempel på varsel", {
 kropp: "Dette er mer tekst",
 data: {Hallo: "verden"}
 })

 varsel (notification.data.hello)
 }
 })
})

Du kan få tilgang til dataene fra data egenskap på samme måte som vist i kodeblokken ovenfor (inne i varsling()).

Du kan også binde hendelseslyttere til varslene dine. For eksempel kjøres følgende hendelseslytter hver gang du lukker push-varslingen. Tilbakeringingsfunksjonen logger ganske enkelt den tilpassede meldingen.

konst varsel = ny Melding("Eksempel på varsel", { 
 kropp: "Dette er mer tekst",
 data: {Hallo: "verden"} 
})
melding. addEventListener("Lukk", e => {
konsoll.log (e.target.data.hello)
})

Dette er en utmerket måte å sende data rundt på hvis du trenger å gjøre noe når noen lukker et varsel eller klikker på det. Bortsett fra Lukk hendelse (som kjøres når du lukker varselet), bør du beholde disse begivenhetslyttere i dine tanker:

• forestilling: Utføres når varselet vises.
• klikk: Utføres når brukeren klikker hvor som helst i varselet.
• feil: Utføres når du nekter JavaScript-tillatelse til å sende varsler.

Ikonet Eiendom

De ikon egenskapen er for å legge til et ikon i push-varslingen. Forutsatt at du har en ikonlogo kalt logo.png i gjeldende katalog kan du bruke den i varslene dine slik:

konst varsel = ny Melding("Eksempel på varsel", { 
 ikon: "logo.png"
})

Hvis du sliter med å koble til filene dine, må du forstå hvordan relative URL-er og absolutte URL-er fungerer.

Når du lagrer filen, oppdaterer nettleseren og klikker på knappen, vil varselet få bildet vist på venstre side av overskriften og brødteksten.

Taggen Attributt

Når du stiller inn stikkord attributtet i varselet ditt, gir du i utgangspunktet varselet en unik ID. To varsler kan ikke eksistere sammen hvis de har samme tag. I stedet vil det nyeste varselet overskrive det eldre varselet.

Tenk på vårt forrige knappeksempel (uten tag). Hvis du skulle klikke på knappen tre ganger i rask rekkefølge, vil de tre varslene vises, og de vil stables oppå hverandre. La oss nå si at du la til følgende tag i varselet:

konst varsel = ny Melding("Eksempel på varsel", { 
 kropp: "Dette er mer tekst",
 stikkord: "Min nye tag"
})

Hvis du skulle klikke på knappen igjen, vises bare én varslingsboks. Hvert påfølgende klikk vil overskrive det forrige varselet, så bare ett varsel vises uansett hvor mange ganger du klikker på knappen. Dette er nyttig hvis du vil legge til dynamiske data (som Math.random()) til kroppen:

konst varsel = ny Melding("Eksempel på varsel", { 
 kropp: Matte.tilfeldig()
 ikon: "logo.png",
 stikkord: "Min kroppsmerke"
})

Hver gang du klikker på knappen, vil et nytt nummer vises. Bruk tag-egenskapen hvis du vil overskrive et gjeldende varsel med ny informasjon i den. I en meldingsapp kan du for eksempel bruke tag-attributtet til å overskrive varselet med nye meldinger.

Et eksempel på push-varsling ved bruk av JavaScript

Følgende eksempel oppdager når du mister fokus på siden din (dvs. når du lukker siden eller åpner en ny fane). I dette tilfellet sender koden et varsel som ber deg returnere:

la melding
dokument.addEventListener("synlighet-endring", ()=> {
hvis(dokument.visibilityState "skjult") {
 varsel = ny Melding("Kom tilbake vær så snill", {
 kropp: "Ikke dra ennå :("
 stikkord: "Kom tilbake"
 })
 } ellers {
 notification.close()
 }
})

Hver gang du mister fokus på den siden, får du et varsel som ber deg komme tilbake til siden. Men når du kommer tilbake til siden, vil ellers blokk utføres, som lukker push-varslingen. Denne teknikken er utmerket i situasjoner der du ønsker å gi brukeren en form for informasjon etter å ha forlatt siden din.

Lær mer om JavaScript

Begivenhetsvarsling er bare en av de mange funksjonene du kan finne i JavaScript. For å være veldig god med varsler, må du først forstå de grunnleggende språkfunksjonene og syntaksen til JavaScript. Å bygge enkle spill er en av måtene du kan øke ferdighetene dine på og gjøre deg kjent med de grunnleggende begrepene i språket.