Cum să trimiteți notificări push cu JavaScript

Notificările JavaScript sunt o modalitate de a trimite mesaje utilizatorilor dvs. în timp real. Le puteți folosi pentru a notifica despre actualizările site-ului dvs. web, mesaje noi de chat, e-mailuri sau orice activitate pe rețelele sociale. De asemenea, puteți utiliza notificări pentru mementourile din calendar (cum ar fi o întâlnire care se apropie pe Google Meet sau Zoom).

Aflați cum să creați notificări de evenimente în JavaScript și să le trimiteți către telefon sau browser web. Veți realiza acest lucru folosind JavaScript încorporat, pe partea clientului - nu este necesară nicio bibliotecă externă!

Solicitarea permisiunii de a trimite notificări

Pentru a crea o notificare, trebuie să apelați Notificare clasă pentru a crea un obiect. Vă oferă acces la diferite proprietăți și metode pe care le puteți utiliza pentru a vă configura notificarea. Dar înainte de a crea o notificare, va trebui să solicitați mai întâi permisiunea utilizatorului.

Următorul JavaScript va solicita permisiunea de a trimite notificări utilizatorilor. The cer permisiunea apelul va returna un mesaj care indică dacă browserul permite notificări sau nu:

const butonul = document.querySelector('buton')
 button.addEventListener("clic", ()=> {
 Notification.requestPermission().then(permisiune => {
 alertă (permisiune)
 })
})

Când faceți clic pe buton, este posibil să primiți o alertă care spune negat. Aceasta înseamnă că browserul a refuzat JavaScript să trimită notificări de evenimente. Starea permisiunii este negat pentru cazurile în care utilizatorul a împiedicat în mod explicit site-urile să trimită notificări (prin setările browserului) sau utilizatorul navighează în modul incognito.

În astfel de cazuri, este mai bine să respectați decizia utilizatorului pentru notificări refuzate și ar trebui să vă abțineți de la a le deranja în continuare.

Trimiterea notificărilor de bază

Creați o notificare push prin crearea unui Notificare obiect cu noul cuvânt cheie. Pentru o scufundare profundă în programarea orientată pe obiecte, puteți consulta ghidul nostru despre cum se creează clase în JavaScript.

Deoarece ai trimite notificări numai dacă ți se acordă permisiunea, ar trebui să o înfășori într-un dacă Verifica.

const butonul = document.querySelector('buton')
button.addEventListener("clic", ()=> {
 Notification.requestPermission().then(permanent => {
dacă(permanent "acordat") {
nou Notificare(„Exemplu de notificare”)
 }
 })
})

Faceți clic pe butonul și veți primi o notificare push în colțul din dreapta jos al browserului dvs. web cu textul specificat.

Acesta este cel mai simplu mod de a crea notificări și funcționează atât pe telefon, cât și pe computer. Să ne uităm la câteva proprietăți avansate de notificare.

Proprietăți avansate de notificări

Pe lângă titlul notificării, puteți transmite și un argument de opțiuni constructorului atunci când creați obiectul de notificare. Acest argument de opțiuni trebuie să fie un obiect. Aici, puteți adăuga mai multe opțiuni pentru a vă personaliza notificarea.

Proprietatea corpului

Prima proprietate pe care ar trebui să o cunoști este corp proprietate. Veți folosi acest lucru pentru a adăuga un corp la notificare, de obicei pentru a transmite mai multe informații sub formă de text. Iată un exemplu simplu:

const butonul = document.querySelector('buton')
button.addEventListener("clic", ()=> {
 Notification.requestPermission().then(permanent => {
dacă(permanent "acordat") {
nou Notificare(„Exemplu de notificare”, {
 corp: „Acesta este mai mult text”,
 })
 }
 })
})

Dacă rulați acest cod, textul corpului va apărea în notificarea push, sub Exemplu de notificare antet.

Atributul de date

De multe ori ați putea dori să adăugați date personalizate la notificări. Poate doriți să afișați un anumit mesaj de eroare dacă permisiunea este refuzată sau să stocați datele pe care le-ați primit de la un API. Pentru toate astfel de cazuri, puteți utiliza date proprietate pentru a adăuga date personalizate la notificarea dvs.

button.addEventListener("clic", ()=> {
 Notification.requestPermission().then(permanent => {
dacă(permanent "acordat") {
const notificare = nou Notificare(„Exemplu de notificare”, {
 corp: „Acesta este mai mult text”,
 date: {Buna ziua: "lume"}
 })

 alertă (notificare.data.hello)
 }
 })
})

Puteți accesa datele din date proprietate similară cu cea arătată în blocul de cod de mai sus (în interiorul alerta()).

De asemenea, puteți lega ascultătorii evenimentelor la notificările dvs. De exemplu, următorul ascultător de evenimente se execută ori de câte ori închideți notificarea push. Funcția de apel invers pur și simplu înregistrează mesajul personalizat.

const notificare = nou Notificare(„Exemplu de notificare”, { 
 corp: „Acesta este mai mult text”,
 date: {Buna ziua: "lume"} 
})
notificare. addEventListener("închide", e => {
consolă.log (e.target.data.hello)
})

Aceasta este o modalitate excelentă de a transmite date dacă trebuie să faceți ceva când cineva închide o notificare sau dă clic pe ea. În afară de închide eveniment (care se execută atunci când închideți notificarea), ar trebui să le păstrați ascultători de evenimente in mintea ta:

• spectacol: Se execută când se afișează notificarea.
• clic: Se execută când utilizatorul face clic oriunde în notificare.
• eroare: Se execută atunci când refuzați permisiunea JavaScript de a trimite notificări.

Pictograma Proprietate

The pictograma proprietatea este pentru adăugarea unei pictograme la notificarea push. Presupunând că aveți o pictogramă numită logo.png în directorul curent, îl puteți folosi în notificările dvs. astfel:

const notificare = nou Notificare(„Exemplu de notificare”, { 
 pictograma: „logo.png”
})

Dacă vă străduiți să vă conectați la fișierele dvs., trebuie înțelegeți funcționarea URL-urilor relative și URL-urile absolute.

Când salvați fișierul, reîmprospătați browserul și faceți clic pe butonul, notificarea va avea imaginea afișată în partea stângă a antetului și a corpului.

Eticheta Atribut

Când setați etichetă atribut în notificarea dvs., practic îi dați notificării un ID unic. Două notificări nu pot exista împreună dacă au aceeași etichetă. În schimb, cea mai nouă notificare va suprascrie notificarea mai veche.

Luați în considerare exemplul nostru anterior de buton (fără etichetă). Dacă ar fi să faceți clic pe butonul de trei ori în succesiune rapidă, cele trei notificări vor apărea și se vor stivui una peste alta. Acum să presupunem că ați adăugat următoarea etichetă la notificare:

const notificare = nou Notificare(„Exemplu de notificare”, { 
 corp: „Acesta este mai mult text”,
 etichetă: „Noua mea etichetă”
})

Dacă ar fi să faceți clic din nou pe buton, va apărea o singură casetă de notificare. Fiecare clic ulterior va suprascrie notificarea anterioară, astfel încât o singură notificare va apărea indiferent de câte ori ați face clic pe butonul. Acest lucru este util dacă doriți să adăugați date dinamice (cum ar fi Math.random()) la corp:

const notificare = nou Notificare(„Exemplu de notificare”, { 
 corp: Matematică.Aleatoriu()
 pictograma: „logo.png”,
 etichetă: „Eticheta corpului meu”
})

De fiecare dată când faceți clic pe butonul, va apărea un număr nou. Utilizați proprietatea etichetei dacă doriți să suprascrieți o notificare curentă cu informații noi în interiorul acesteia. Într-o aplicație de mesagerie, de exemplu, puteți utiliza atributul etichetă pentru a suprascrie notificarea cu mesaje noi.

Un exemplu de notificare push folosind JavaScript

Următorul exemplu detectează oricând pierdeți concentrarea pe pagina dvs. (adică atunci când închideți pagina sau deschideți o filă nouă). În acest caz, codul trimite o notificare prin care vă cere să reveniți:

lăsa notificare
document.addEventListener("schimbare de vizibilitate", ()=> {
dacă(document.VizibilitateState "ascuns") {
 notificare = nou Notificare("Vino înapoi, te rog", {
 corp: "Nu pleca inca :("
 etichetă: "Întoarce-te"
 })
 } altfel {
 notification.close()
 }
})

Ori de câte ori vă pierdeți atenția pe pagina respectivă, veți primi o notificare care vă va cere să reveniți la pagină. Dar odată ce te întorci la pagină, altfel blocul se execută, ceea ce închide notificarea push. Această tehnică este excelentă în situațiile în care doriți să oferiți utilizatorului un fel de informații după ce părăsiți pagina dvs.

Aflați mai multe despre JavaScript

Notificarea evenimentului este doar una dintre numeroasele funcții pe care le puteți găsi în JavaScript. Pentru a fi cu adevărat bun cu notificările, trebuie mai întâi să înțelegeți caracteristicile fundamentale ale limbajului și sintaxa JavaScript. Construirea de jocuri simple este una dintre modalitățile prin care vă puteți îmbunătăți abilitățile și vă puteți familiariza cu conceptele de bază ale limbii.