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
