Come inviare notifiche push con JavaScript

Le notifiche JavaScript sono un modo per inviare messaggi ai tuoi utenti in tempo reale. Puoi usarli per notificare aggiornamenti del tuo sito Web, nuovi messaggi di chat, e-mail o qualsiasi attività sui social media. Puoi anche utilizzare le notifiche per i promemoria del calendario (come una riunione imminente su Google Meet o Zoom).

Scopri come creare notifiche di eventi in JavaScript e inviarle al tuo telefono o browser web. Raggiungerai questo obiettivo utilizzando JavaScript lato client integrato, nessuna libreria esterna richiesta!

Richiesta di autorizzazione all'invio di notifiche

Per creare una notifica, è necessario chiamare il Notifica class per creare un oggetto. Ti dà accesso a varie proprietà e metodi che puoi utilizzare per configurare la tua notifica. Ma prima di creare una notifica, devi prima richiedere l'autorizzazione all'utente.

Il codice JavaScript seguente richiederà l'autorizzazione per l'invio di notifiche utente. IL richiesta di permesso call restituirà un messaggio che indica se il browser consente o meno le notifiche:

cost pulsante = documento.querySelector('pulsante')
 button.addEventListener("clic", ()=> {
 Notification.requestPermission().then(autorizzazione => {
 allerta (permesso)
 })
})

Quando fai clic sul pulsante, potresti ricevere un avviso che dice negato. Ciò significa che il browser ha negato a JavaScript l'invio di notifiche di eventi. Lo stato dell'autorizzazione è negato per i casi in cui l'utente abbia esplicitamente impedito ai siti di inviare notifiche (tramite le impostazioni del browser) o l'utente stia navigando in modalità di navigazione in incognito.

In tali casi, è meglio rispettare la decisione dell'utente per le notifiche negate e dovresti evitare di disturbarlo ulteriormente.

Invio di notifiche di base

Si crea una notifica push creando un file Notifica oggetto con la nuova parola chiave. Per un approfondimento sulla programmazione orientata agli oggetti, puoi fare riferimento alla nostra guida su come creare classi in JavaScript.

Poiché invierai notifiche solo se viene concessa l'autorizzazione, dovresti racchiuderle in un file Se controllo.

cost pulsante = documento.querySelector('pulsante')
button.addEventListener("clic", ()=> {
 Notification.requestPermission().then(perm => {
Se(perm 'concesso') {
nuovo Notifica("Esempio di notifica")
 }
 })
})

Fai clic sul pulsante e riceverai una notifica push nell'angolo in basso a destra del tuo browser Web con il testo specificato.

Questo è il modo più semplice per creare notifiche e funziona sia sul telefono che sul computer. Diamo un'occhiata ad alcune proprietà di notifica avanzate.

Proprietà delle notifiche avanzate

Oltre al titolo della notifica, puoi anche passare un argomento opzioni al costruttore durante la creazione dell'oggetto notifica. Questo argomento delle opzioni deve essere un oggetto. Qui puoi aggiungere diverse opzioni per personalizzare la tua notifica.

La proprietà del corpo

La prima proprietà che dovresti sapere è corpo proprietà. Lo useresti per aggiungere un corpo alla tua notifica, in genere per trasmettere più informazioni sotto forma di testo. Ecco un semplice esempio:

cost pulsante = documento.querySelector('pulsante')
button.addEventListener("clic", ()=> {
 Notification.requestPermission().then(perm => {
Se(perm 'concesso') {
nuovo Notifica("Esempio di notifica", {
 corpo: "Questo è altro testo",
 })
 }
 })
})

Se esegui questo codice, il corpo del testo verrà visualizzato nella notifica push, sotto il Esempio di notifica intestazione.

L'attributo dei dati

Spesso potresti voler aggiungere dati personalizzati alle notifiche. Forse vuoi visualizzare un particolare messaggio di errore se l'autorizzazione viene negata o archiviare i dati che hai ricevuto da un'API. Per tutti questi casi, puoi usare il dati proprietà per aggiungere dati personalizzati alla notifica.

button.addEventListener("clic", ()=> {
 Notification.requestPermission().then(perm => {
Se(perm 'concesso') {
cost notifica = nuovo Notifica("Esempio di notifica", {
 corpo: "Questo è altro testo",
 dati: {Ciao: "mondo"}
 })

 avviso (notification.data.hello)
 }
 })
})

È possibile accedere ai dati dal dati proprietà in modo simile a come mostrato nel blocco di codice precedente (all'interno del file mettere in guardia()).

Puoi anche associare i listener di eventi alle tue notifiche. Ad esempio, il seguente listener di eventi viene eseguito ogni volta che chiudi la notifica push. La funzione di callback registra semplicemente il messaggio personalizzato.

cost notifica = nuovo Notifica("Esempio di notifica", { 
 corpo: "Questo è altro testo",
 dati: {Ciao: "mondo"} 
})
notifica. addEventListener("vicino", e => {
consolare.log (e.target.data.hello)
})

Questo è un modo eccellente per passare i dati se devi fare qualcosa quando qualcuno chiude una notifica o fa clic su di essa. A parte il vicino event (che viene eseguito quando chiudi la notifica), dovresti conservarli ascoltatori di eventi nella tua mente:

• spettacolo: viene eseguito quando viene visualizzata la notifica.
• clic: viene eseguito quando l'utente fa clic in un punto qualsiasi della notifica.
• errore: viene eseguito quando si nega l'autorizzazione JavaScript per l'invio di notifiche.

L'icona Proprietà

IL icona proprietà serve per aggiungere un'icona alla notifica push. Supponendo che tu abbia un logo icona chiamato logo.png nella directory corrente, puoi usarlo nelle tue notifiche in questo modo:

cost notifica = nuovo Notifica("Esempio di notifica", { 
 icona: "logo.png"
})

Se hai difficoltà a collegarti ai tuoi file, devi farlo comprendere il funzionamento degli URL relativi e degli URL assoluti.

Quando si salva il file, si aggiorna il browser e si fa clic sul pulsante, l'immagine della notifica verrà visualizzata sul lato sinistro dell'intestazione e del corpo.

L'attributo del tag

Quando imposti il etichetta attributo nella tua notifica, in pratica stai assegnando alla notifica un ID univoco. Due notifiche non possono coesistere se hanno lo stesso tag. Al contrario, la notifica più recente sovrascriverà la notifica precedente.

Considera il nostro precedente esempio di pulsante (senza tag). Se dovessi fare clic sul pulsante tre volte in rapida successione, appariranno le tre notifiche e si accumuleranno una sopra l'altra. Supponiamo ora che tu abbia aggiunto il seguente tag alla notifica:

cost notifica = nuovo Notifica("Esempio di notifica", { 
 corpo: "Questo è altro testo",
 etichetta: "Il mio nuovo tag"
})

Se dovessi fare nuovamente clic sul pulsante, verrà visualizzata solo una casella di notifica. Ogni clic successivo sovrascriverà la notifica precedente, quindi verrà visualizzata solo una notifica indipendentemente da quante volte si fa clic sul pulsante. Questo è utile se vuoi aggiungere dati dinamici (come Matematica.casuale()) al corpo:

cost notifica = nuovo Notifica("Esempio di notifica", { 
 corpo: Matematica.casuale()
 icona: "logo.png",
 etichetta: "Il mio cartellino del corpo"
})

Ogni volta che fai clic sul pulsante, verrà visualizzato un nuovo numero. Utilizzare la proprietà tag se si desidera sovrascrivere una notifica corrente con nuove informazioni al suo interno. In un'app di messaggistica, ad esempio, puoi utilizzare l'attributo tag per sovrascrivere la notifica con nuovi messaggi.

Un esempio di notifica push tramite JavaScript

L'esempio seguente rileva ogni volta che perdi il focus sulla tua pagina (ad esempio quando chiudi la pagina o apri una nuova scheda). In questo caso, il codice invia una notifica chiedendoti di restituire:

permettere notifica
documento.addEventListener("cambio di visibilità", ()=> {
Se(documento.visibilityState "nascosto") {
 notifica = nuovo Notifica("Torna indietro per favore", {
 corpo: "Non andartene ancora :("
 etichetta: "Ritorno"
 })
 } altro {
 notifica.chiudi()
 }
})

Ogni volta che perdi il focus su quella pagina, riceverai una notifica che ti chiede di tornare alla pagina. Ma una volta che torni alla pagina, il file altro viene eseguito il blocco, che chiude la notifica push. Questa tecnica è eccellente nelle situazioni in cui vuoi fornire all'utente qualche tipo di informazione dopo aver lasciato la tua pagina.

Ulteriori informazioni su JavaScript

La notifica degli eventi è solo una delle numerose funzionalità che puoi trovare in JavaScript. Per essere veramente bravo con le notifiche, devi prima cogliere le caratteristiche fondamentali del linguaggio e la sintassi di JavaScript. Costruire giochi semplici è uno dei modi attraverso i quali puoi potenziare le tue abilità e familiarizzare con i concetti di base della lingua.