Hur man skickar push-meddelanden med JavaScript

JavaScript-aviseringar är ett sätt att skicka meddelanden till dina användare i realtid. Du kan använda dem för att meddela om uppdateringar av din webbplats, nya chattmeddelanden, e-postmeddelanden eller andra aktiviteter på sociala medier. Du kan också använda aviseringar för kalenderpåminnelser (som ett kommande möte på Google Meet eller Zoom).

Lär dig hur du skapar händelseaviseringar i JavaScript och skickar dem till din telefon eller webbläsare. Du uppnår detta med inbyggt JavaScript på klientsidan – inget externt bibliotek krävs!

Begär tillåtelse att skicka meddelanden

För att skapa en avisering måste du ringa till Underrättelse klass för att skapa ett objekt. Det ger dig tillgång till olika egenskaper och metoder som du kan använda för att konfigurera ditt meddelande. Men innan du skapar ett meddelande måste du först begära tillstånd från användaren.

Följande JavaScript kommer att begära tillstånd att skicka användarmeddelanden. De be om tillåtelse call returnerar ett meddelande som anger om webbläsaren tillåter aviseringar eller inte:

konst knapp = dokumentera.querySelector('knapp')
 button.addEventListener("klick", ()=> {
 Notification.requestPermission().then(lov => {
 varning (tillstånd)
 })
})

När du klickar på knappen kan du få en varning som säger nekad. Det betyder att webbläsaren har nekat JavaScript från att skicka händelseaviseringar. Tillståndsstatusen är nekad för fall där användaren uttryckligen har förhindrat sajterna att skicka meddelanden (via webbläsarinställningar) eller användaren surfar i inkognitoläge.

I sådana fall är det bättre att respektera användarens beslut för nekade meddelanden och du bör avstå från att störa dem ytterligare.

Skickar grundläggande aviseringar

Du skapar en push-notis genom att skapa en Underrättelse objekt med det nya nyckelordet. För en djupdykning i objektorienterad programmering kan du hänvisa till vår guide om hur man skapar klasser i JavaScript.

Eftersom du bara skulle skicka aviseringar om tillstånd beviljas, måste du linda in det i en om kolla upp.

konst knapp = dokumentera.querySelector('knapp')
button.addEventListener("klick", ()=> {
 Notification.requestPermission().then(perm => {
om(perm "beviljat") {
ny Underrättelse("Exempelmeddelande")
 }
 })
})

Klicka på knappen så får du ett pushmeddelande i det nedre högra hörnet av din webbläsare med den angivna texten.

Detta är det mest grundläggande sättet att skapa aviseringar, och det fungerar på din telefon såväl som på din dator. Låt oss titta på några avancerade meddelandeegenskaper.

Avancerade meddelandeegenskaper

Utöver meddelandetiteln kan du även skicka ett alternativargument till konstruktorn när du skapar meddelandeobjektet. Detta alternativargument måste vara ett objekt. Här kan du lägga till flera alternativ för att anpassa din avisering.

Kroppen Egendom

Den första egenskapen du bör känna till är kropp fast egendom. Du skulle använda detta för att lägga till en text i ditt meddelande, vanligtvis för att förmedla mer information i form av text. Här är ett enkelt exempel:

konst knapp = dokumentera.querySelector('knapp')
button.addEventListener("klick", ()=> {
 Notification.requestPermission().then(perm => {
om(perm "beviljat") {
ny Underrättelse("Exempelmeddelande", {
 kropp: "Det här är mer text",
 })
 }
 })
})

Om du kör den här koden kommer brödtexten att visas i push-meddelandet, under Exempelmeddelande rubrik.

Dataattributet

Ofta kanske du vill lägga till anpassad data till aviseringar. Kanske vill du visa ett visst felmeddelande om tillstånd nekas, eller lagra data som du fått från ett API. För alla sådana fall kan du använda data egendom för att lägga till anpassad data till din avisering.

button.addEventListener("klick", ()=> {
 Notification.requestPermission().then(perm => {
om(perm "beviljat") {
konst meddelande = ny Underrättelse("Exempelmeddelande", {
 kropp: "Det här är mer text",
 data: {Hallå: "värld"}
 })

 varning (notification.data.hello)
 }
 })
})

Du kan komma åt data från data egenskap liknande den som visas i kodblocket ovan (inuti varna()).

Du kan också binda evenemangslyssnare till dina aviseringar. Till exempel, följande händelseavlyssnare körs när du stänger push-meddelandet. Återuppringningsfunktionen loggar helt enkelt det anpassade meddelandet.

konst meddelande = ny Underrättelse("Exempelmeddelande", { 
 kropp: "Det här är mer text",
 data: {Hallå: "värld"} 
})
underrättelse. addEventListener("stänga", e => {
trösta.log (e.target.data.hello)
})

Det här är ett utmärkt sätt att förmedla data om du behöver göra något när någon stänger en avisering eller klickar på den. Förutom stänga händelse (som körs när du stänger aviseringen), bör du behålla dessa evenemangslyssnare i dina tankar:

• show: Körs när aviseringen visas.
• klick: Körs när användaren klickar var som helst i meddelandet.
• fel: Körs när du nekar JavaScript-tillstånd att skicka aviseringar.

Ikonen Egenskap

De ikon egenskapen är för att lägga till en ikon i push-meddelandet. Förutsatt att du har en ikonlogotyp som heter logo.png i den aktuella katalogen kan du använda den i dina meddelanden så här:

konst meddelande = ny Underrättelse("Exempelmeddelande", { 
 ikon: "logo.png"
})

Om du kämpar för att länka till dina filer måste du göra det förstå hur relativa webbadresser och absoluta webbadresser fungerar.

När du sparar filen, uppdaterar webbläsaren och klickar på knappen, kommer meddelandet att visa bilden på vänster sida av rubriken och brödtexten.

Taggen Attribut

När du ställer in märka attribut i ditt meddelande, ger du i princip meddelandet ett unikt ID. Två aviseringar kan inte existera tillsammans om de har samma tagg. Istället kommer det senaste meddelandet att skriva över det äldre meddelandet.

Tänk på vårt tidigare knappexempel (utan tagg). Om du skulle klicka på knappen tre gånger i snabb följd, kommer de tre aviseringarna att visas och de staplas ovanpå varandra. Låt oss nu säga att du lade till följande tagg i aviseringen:

konst meddelande = ny Underrättelse("Exempelmeddelande", { 
 kropp: "Det här är mer text",
 märka: "Min nya tag"
})

Om du skulle klicka på knappen igen kommer endast en meddelanderuta att visas. Varje efterföljande klick kommer att skriva över det tidigare meddelandet, så endast ett meddelande visas oavsett hur många gånger du klickar på knappen. Detta är användbart om du vill lägga till dynamisk data (som Math.random()) till kroppen:

konst meddelande = ny Underrättelse("Exempelmeddelande", { 
 kropp: Matematik.slumpmässig()
 ikon: "logo.png",
 märka: "Min kroppsetikett"
})

Varje gång du klickar på knappen visas ett nytt nummer. Använd taggenskapen om du vill skriva över ett aktuellt meddelande med ny information inuti den. I en meddelandeapp kan du till exempel använda tag-attributet för att skriva över aviseringen med nya meddelanden.

Ett exempel på push-meddelanden med JavaScript

Följande exempel upptäcker varje gång du tappar fokus på din sida (dvs. när du stänger sidan eller öppnar en ny flik). I det här fallet skickar koden ett meddelande som ber dig att returnera:

låta underrättelse
dokumentera.addEventListener("synlighet-förändring", ()=> {
om(dokumentera.visibilityState "dold") {
 meddelande = ny Underrättelse("Kom tillbaka snälla", {
 kropp: "Gå inte iväg ännu :("
 märka: "Kom tillbaka"
 })
 } annan {
 notification.close()
 }
})

När du tappar fokus på den sidan får du ett meddelande som ber dig komma tillbaka till sidan. Men när du väl återvänder till sidan, annan blocket körs, vilket stänger push-meddelandet. Denna teknik är utmärkt i situationer där du vill ge användaren någon form av information efter att ha lämnat din sida.

Lär dig mer om JavaScript

Händelseavisering är bara en av de många funktionerna du kan hitta i JavaScript. För att bli riktigt bra med aviseringar måste du först förstå de grundläggande språkfunktionerna och syntaxen i JavaScript. Att bygga enkla spel är ett av sätten genom vilka du kan öka dina färdigheter och bekanta dig med språkets grundläggande begrepp.