JavaScript Desktop Notification

Obiettivi del blog

Dopo aver letto questo blog, sarai in grado di configurare la notifica desktop per il tuo sito. Sarai anche in grado di personalizzare la tua notifica con il tuo messaggio, immagine, icona, ecc.

Vantaggio della notifica desktop

Supponiamo che desideri notificare il tuo cliente al di fuori della pagina Web, quindi possiamo utilizzare la notifica sul desktop come se avessi abilitato la notifica desktop per la posta elettronica, non è necessario controllare regolarmente le email. In ogni email, hai ricevuto una notifica.

Codice per la notifica desktop

Aggiungi la funzione seguente nel tag script nella parte superiore dell'HTML.

function showNotification () {// Verifica se il browser dell'utente supporta le notifiche o meno se (! ("Notifica" nella finestra)) {alert ("Il tuo browser non supporta la notifica desktop"); } // Verificare se le autorizzazioni di notifica sono già state concesse o meno se (Notification.permission === "concesso") {// Crea notifica var options = {body: 'Riga di notifica semplice 1. \ NIn seconda riga del messaggio di notifica . ', // corpo della notifica dir:' ltr ', // direzione del messaggio ltr: da sinistra a destra. rtl: da destra a sinistra. immagine: 'https://www.knowband.com/blog/wp-content/uploads/2016/09/cropped-knowband_logo-v2.png', // Aggiungi immagine se richiesto per mostrare l'icona: 'https: // www .knowband.com / blog / wp-content / uploads / 2016 / 09 / cropped-knowband_logo-v2.png ', // Aggiungi icona se richiesto per mostrare} var title = "Blog Knowband"; notifica var = nuova notifica (titolo, opzioni); // Aggiungi la notifica clicca il link notification.onclick = function (event) {event.preventDefault (); // impedisce al browser di focalizzare la scheda di notifica window.open ('https://www.knowband.com/blog/', '_blank'); notification.close (); // Chiudi la notifica dopo il clic}} // Se non ci sono permessi, chiedi l'autorizzazione per l'utente se (Notification.permission! == "negato") {Notification.requestPermission (). then (function ( permesso) {// Se l'utente accetta, creiamo una notifica se (permesso === "concesso") {var notification = new Notification ("Ciao!");}}); }}

Puoi attivare questa funzione attraverso l'evento come desideri. A scopo di test, puoi verificarlo aggiungendo un pulsante. Usa sotto il codice per il pulsante nel corpo

<button onclick = "showNotification ()"> Mostra notifica! </ button>

Nota: Se si sta eseguendo questo codice sul sistema locale, utilizzare il sever locale, ad esempio localhost.

Schermata di output

Schermata di output


Sunny Saurabh

Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as expert as a PHP developer. He has also expert in database design, server maintenance and their security. He has achieved this goal only in the short span of 2yrs and still looking forward to achieve more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.

Leave a Reply

Your email address will not be published. Required fields are marked *