Sådan sender du push-meddelelser med JavaScript

JavaScript-meddelelser er en måde at sende beskeder til dine brugere i realtid. Du kan bruge dem til at give besked om opdateringer af dit websted, nye chatbeskeder, e-mails eller andre sociale medieaktiviteter. Du kan også bruge notifikationer til kalenderpåmindelser (såsom et nærtstående møde på Google Meet eller Zoom).

Lær, hvordan du opretter begivenhedsmeddelelser i JavaScript og sender dem til din telefon eller webbrowser. Du opnår dette ved at bruge indbygget JavaScript på klientsiden – intet eksternt bibliotek påkrævet!

Anmoder om tilladelse til at sende meddelelser

For at oprette en notifikation skal du ringe til Notifikation klasse for at oprette et objekt. Det giver dig adgang til forskellige egenskaber og metoder, som du kan bruge til at konfigurere din notifikation. Men før du opretter en notifikation, skal du først anmode om tilladelse fra brugeren.

Følgende JavaScript vil anmode om tilladelse til at sende brugermeddelelser. Det anmod om tilladelse opkald returnerer en besked, der angiver, om browseren tillader meddelelser eller ej:

konst knap = dokument.querySelector('knap')
 button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(tilladelse => {
 advarsel (tilladelse)
 })
})

Når du klikker på knappen, får du muligvis en advarsel, der siger nægtet. Det betyder, at browseren har nægtet JavaScript fra at sende hændelsesmeddelelser. Tilladelsesstatus er nægtet i tilfælde, hvor brugeren eksplicit har forhindret webstederne i at sende meddelelser (via browserindstillinger), eller brugeren surfer i inkognitotilstand.

I sådanne tilfælde er det bedre at respektere brugerens beslutning om afviste meddelelser, og du bør undlade at genere dem yderligere.

Afsendelse af grundlæggende meddelelser

Du opretter en push-meddelelse ved at oprette en Notifikation objekt med det nye søgeord. For et dybt dyk ned i objektorienteret programmering kan du henvise til vores guide vedr hvordan man opretter klasser i JavaScript.

Da du kun vil sende meddelelser, hvis tilladelse er givet, skal du pakke det ind i en hvis kontrollere.

konst knap = dokument.querySelector('knap')
button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
hvis(perm 'bevilget') {
ny Notifikation("Eksempel underretning")
 }
 })
})

Klik på knappen, og du får en push-meddelelse i nederste højre hjørne af din webbrowser med den angivne tekst.

Dette er den mest basale måde at oprette meddelelser på, og det fungerer på din telefon såvel som på din computer. Lad os se på nogle avancerede meddelelsesegenskaber.

Avancerede meddelelsesegenskaber

Ud over meddelelsestitlen kan du også videregive et option-argument til konstruktøren, når du opretter meddelelsesobjektet. Dette option-argument skal være et objekt. Her kan du tilføje flere muligheder for at tilpasse din notifikation.

Kroppen Ejendom

Den første ejendom du bør kende er legeme ejendom. Du vil bruge dette til at tilføje en brødtekst til din notifikation, typisk for at formidle flere oplysninger i form af tekst. Her er et simpelt eksempel:

konst knap = dokument.querySelector('knap')
button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
hvis(perm 'bevilget') {
ny Notifikation("Eksempel underretning", {
 legeme: "Dette er mere tekst",
 })
 }
 })
})

Hvis du kører denne kode, vises brødteksten i push-meddelelsen under Eksempel underretning header.

Dataattributten

Ofte vil du måske tilføje tilpassede data til meddelelser. Måske vil du vise en bestemt fejlmeddelelse, hvis tilladelse nægtes, eller gemme data, du har modtaget fra en API. I alle sådanne tilfælde kan du bruge data ejendom for at tilføje tilpassede data til din notifikation.

button.addEventListener("klik", ()=> {
 Notification.requestPermission().then(perm => {
hvis(perm 'bevilget') {
konst meddelelse = ny Notifikation("Eksempel underretning", {
 legeme: "Dette er mere tekst",
 data: {Hej: "verden"}
 })

 advarsel (notification.data.hello)
 }
 })
})

Du kan få adgang til data fra data egenskab svarende til som vist i ovenstående kodeblok (inde i alert()).

Du kan også binde begivenhedslyttere til dine notifikationer. For eksempel udføres følgende hændelseslytter, når du lukker push-meddelelsen. Tilbagekaldsfunktionen logger simpelthen den tilpassede besked.

konst meddelelse = ny Notifikation("Eksempel underretning", { 
 legeme: "Dette er mere tekst",
 data: {Hej: "verden"} 
})
notifikation. addEventListener("tæt", e => {
konsol.log (e.target.data.hello)
})

Dette er en glimrende måde at videregive data, hvis du skal gøre noget, når nogen lukker en notifikation eller klikker på den. Bortset fra tæt begivenhed (som udføres, når du lukker notifikationen), bør du beholde disse begivenhedslyttere I dine tanker:

• at vise: Udføres, når meddelelsen vises.
• klik: Udføres, når brugeren klikker hvor som helst i meddelelsen.
• fejl: Udføres, når du nægter JavaScript-tilladelse til at sende meddelelser.

Ikonet Ejendom

Det ikon egenskaben er til at tilføje et ikon til push-meddelelsen. Forudsat at du har et ikon logo navngivet logo.png i den aktuelle mappe, kan du bruge den i dine meddelelser som sådan:

konst meddelelse = ny Notifikation("Eksempel underretning", { 
 ikon: "logo.png"
})

Hvis du kæmper for at linke til dine filer, er du nødt til det forstå hvordan relative URL'er og absolutte URL'er fungerer.

Når du gemmer filen, opdaterer browseren og klikker på knappen, vil meddelelsen få billedet vist i venstre side af overskriften og brødteksten.

Taget Attribut

Når du indstiller tag attribut i din notifikation, giver du dybest set notifikationen et unikt ID. To notifikationer kan ikke eksistere sammen, hvis de har det samme tag. I stedet vil den nyeste meddelelse overskrive den ældre meddelelse.

Overvej vores tidligere knapeksempel (uden et tag). Hvis du skulle klikke på knappen tre gange hurtigt efter hinanden, vises de tre meddelelser, og de stables oven på hinanden. Lad os nu sige, at du føjede følgende tag til underretningen:

konst meddelelse = ny Notifikation("Eksempel underretning", { 
 legeme: "Dette er mere tekst",
 tag: "Mit nye tag"
})

Hvis du skulle klikke på knappen igen, vises der kun én meddelelsesboks. Hvert efterfølgende klik vil overskrive den forudgående meddelelse, så kun én meddelelse vises, uanset hvor mange gange du klikker på knappen. Dette er nyttigt, hvis du vil tilføje dynamiske data (f.eks Math.random()) til kroppen:

konst meddelelse = ny Notifikation("Eksempel underretning", { 
 legeme: Matematik.tilfældig()
 ikon: "logo.png",
 tag: "Mit kropsmærke"
})

Hver gang du klikker på knappen, vises et nyt nummer. Brug tag-egenskaben, hvis du vil overskrive en aktuel notifikation med ny information inde i den. I en beskedapp kan du for eksempel bruge tag-attributten til at overskrive notifikationen med nye beskeder.

Et eksempel på push-meddelelse ved brug af JavaScript

Følgende eksempel registrerer, når du mister fokus på din side (dvs. når du lukker siden eller åbner en ny fane). I dette tilfælde sender koden en meddelelse, der beder dig om at returnere:

lade notifikation
dokument.addEventListener("synlighed-ændring", ()=> {
hvis(dokument.visibilityState "skjult") {
 meddelelse = ny Notifikation("Vær sød at komme tilbage", {
 legeme: "Gå ikke afsted endnu :("
 tag: "Kom tilbage"
 })
 } andet {
 notification.close()
 }
})

Hver gang du mister fokus på den side, får du en notifikation, der beder dig om at vende tilbage til siden. Men når du vender tilbage til siden, vil den andet blok udføres, hvilket lukker push-meddelelsen. Denne teknik er fremragende i situationer, hvor du ønsker at give brugeren en form for information efter at have forladt din side.

Lær mere om JavaScript

Begivenhedsmeddelelse er blot en af ​​de mange funktioner, du kan finde i JavaScript. For at være rigtig god med notifikationer skal du først forstå de grundlæggende sprogfunktioner og syntaks i JavaScript. At bygge simple spil er en af ​​måderne, hvorpå du kan øge dine færdigheder og sætte dig ind i sprogets grundlæggende begreber.