Come visualizzare le notifiche di aggiornamento nella scheda del browser

I siti web e le app Web con contenuti aggiornati di frequente devono capire come attirare l'attenzione degli utenti per comunicare loro gli aggiornamenti, in particolare dove gli utenti potrebbero essersi allontanati dalla scheda in cui il sito Web o l'app sono attivi. 

Ci sono un paio di modelli comuni che vedrai in natura. Siti web sociali come Facebook, Twitter e LinkedIn, che potenzialmente ricevono nuovi contenuti ogni pochi secondi, inseriscono il numero pertinente nel titolo della pagina che mostra la quantità di nuovi aggiornamenti nella scheda. Trello, d'altra parte, mostra un piccolo distintivo rosso sulla favicon.

Trello, notifiche su Facebook e Twitter

In questo tutorial, replicheremo questa forma di progettazione del feedback, facendo uso della scheda del browser come mezzo per notificare agli utenti gli aggiornamenti. Guarda la demo e vediamo come è fatta.

Usando il titolo del documento

Inizieremo aggiungendo il numero di nuovi aggiornamenti al titolo della pagina, in modo simile a come fanno Facebook e Twitter.

In uno scenario reale possiamo recuperare i dati in vari modi (parlare con il tuo sviluppatore amichevole). In questo caso, supponiamo di aver recuperato il numero di aggiornamenti e di avere la cifra a nostra disposizione per giocare con JavaScript. Per ora, sembra che al momento abbiamo zero aggiornamenti, quindi passeremo quel numero a una variabile:

var count = 0;

Il prossimo sarà la carne del nostro codice in cui modificheremo il titolo del documento. Prima di tutto, aggiungiamo titolo del documento che recupererà il nostro attuale titolo del documento:

var title = document.title;

Quindi creiamo una nuova funzione per cambiare la stringa all'interno di quel titolo:

function changeTitle () count ++; var newTitle = '(' + count + ')' + title; document.title = newTitle; 

Qui puoi vedere che usiamo JavaScript ++ operatore. Ai fini della nostra dimostrazione il ++ aumenterà il nostro contare numero di 1 per ogni iterazione. Come abbiamo iniziato 0, la prossima iterazione tornerà 1. Noi usiamo il ++ operatore per simulare l'incremento del numero, poiché non abbiamo accesso a un'API per fornirci un numero reale.

Successivamente creiamo un'altra nuova funzione che eseguirà il ChangeTitle () funzione:

function newUpdate () update = setInterval (changeTitle, 2000);  var docBody = document.getElementById ('site-body'); docBody.onload = newUpdate; 

La funzione precedente presuppone che dobbiamo verificare la presenza di nuovi aggiornamenti ogni 2000 millisecondi (2 secondi). La nostra funzione, ChangeTitle (), verrà eseguito continuamente nell'intervallo. Eseguiamo questa funzione non appena viene caricata la pagina.

Il primo metodo è abbastanza semplice. Noi recuperiamo il numero e lo passiamo nel titolo. È possibile modificare le parentesi che racchiudono il numero () a [] o cambiandoli nel ChangeTitle () funzione.

Usando il Favicon

Ora proveremo il secondo approccio, che è quello di cambiare il favicon come fa l'app web Trello. Per questo, avremo bisogno di preparare due varianti di favicon, dove la seconda variante è l'alternativa che mostreremo ogni volta che riceveremo nuovi aggiornamenti.

Inizia collegando la prima favicon all'interno del documento.

Quindi imposta il percorso della nuova favicon in una variabile JavaScript.

var iconNew = 'img / favicon-dot.gif'; 

Come con il primo approccio, creeremo anche due funzioni:

function changeFavicon () document.getElementById ('favicon'). href = iconNew;  function newUpdate () update = setInterval (changeFavicon, 3000); setTimeout (function () clearInterval (update);, 3100);  var docBody = document.getElementById ('site-body'); docBody.onload = newUpdate; 

La prima funzione, changeFavicon (), sostituirà la nostra favicon iniziale con quella con il badge rosso. La seconda funzione, nuovo aggiornamento(), eseguirà la prima funzione entro il tempo specificato.

Sembra che ci sia qualcosa di nuovo da guardare!

Il secondo approccio non è così complicato come potreste aver pensato prima; è, infatti, più semplice del primo in cui abbiamo aggiornato la stringa del titolo della pagina. Inoltre, possiamo riversare più creatività nella favicon alternativa. Ad esempio, potremmo fare il distintivo rosso lampeggiante piuttosto che ancora (stai attento ora ...), o forse cambia l'intero colore e l'icona di favicon.

Nota: Chrome non supporta le favicon con GIF animate.

Utilizzando Favico.js

Per finire, ora utilizzeremo una libreria JavaScript chiamata Favico.js, sviluppata da Miroslav Magda. La libreria fornisce una pratica API con un sacco di opzioni per alterare la favicon come mostrare un badge insieme al numero di aggiornamenti tutti insieme.

Per cominciare, usando JavaScript, definiamo un nuovo Favico istanza che definisce la posizione del badge, l'animazione, il colore dello sfondo e il colore del testo.

var favicon = new Favico (position: 'up', animazione: 'popFade', bgColor: '# dd2c00', textColor: '# fff0e2'); 

Quindi aggiungiamo un paio di funzioni per eseguire questa nuova istanza e infine mostrare il badge nella favicon.

var num = 0; function generateNum () num ++; restituisce num;  function showFaviconBadge () var num = generateNum (); favicon.badge (num);  function newUpdate () update = setInterval (showFaviconBadge, 2000);  var docBody = document.getElementById ('site-body'); docBody.onload = newUpdate; 

Il codice assomiglia in qualche modo al primo metodo che abbiamo fatto prima. Iniziamo con la creazione della funzione che lo farà simulare il numero di aggiornamenti che mostreremo all'interno del badge. La seconda funzione, showFaviconBadge (), è inserire il numero nel badge e mostrare il badge nella favicon. L'ultima funzione nuovo aggiornamento() eseguirà la seconda funzione nell'intervallo di tempo specificato, dandoci la sensazione di ricevere nuovi aggiornamenti.

Conclusione

In questo tutorial, abbiamo utilizzato la scheda del browser come mezzo per informare gli utenti. Abbiamo replicato i metodi che vengono comunemente applicati nei siti web popolari come Facebook, Twitter e Trello e valutando i loro limiti.

Anche in questo caso, probabilmente dovrai apportare un paio di modifiche per adattarlo alla tua particolare applicazione web, ma gli esempi qui ti danno un ottimo inizio!