Cum se afișează Notificările de actualizare în fila Browser

Site-urile web și aplicațiile web cu conținut actualizat frecvent trebuie să găsească o modalitate de a atrage atenția utilizatorilor pentru a le informa despre actualizări, în special în cazul în care utilizatorii s-ar fi putut îndepărta de la fila în care site-ul sau aplicația este activă. 

Există câteva modele comune pe care le veți vedea în sălbăticie. Site-urile sociale, cum ar fi Facebook, Twitter și LinkedIn, care pot primi câte un conținut nou la fiecare câteva secunde, inserați numărul corespunzător în titlul paginii, care arată numărul actualizărilor noi din fila. Trello, pe de altă parte, arată o mică insignă roșie pe favicon.

Notificări Trello, Facebook și Twitter

În acest tutorial, vom replica această formă de feedback, utilizând fila browser ca mijloc de notificare a utilizatorilor despre actualizări. Check out demo-ul apoi să vedem cum se face.

Utilizând titlul documentului

Vom începe prin adăugarea numărului de actualizări noi la titlul paginii, similar cu modul în care fac Facebook și Twitter.

Într-un scenariu din lumea reală am putea prelua date în orice fel (vorbiți cu dezvoltatorul prietenos). În acest caz, vom presupune că am recuperat numărul de actualizări și avem cifra la care ne putem juca în JavaScript. Pentru moment, se pare că în prezent avem zero actualizări, așa că vom trece acel număr la o variabilă:

numărul var = 0;

Următoarea va fi carnea din codul nostru în care vom modifica titlul documentului. Mai întâi, adăugăm titlul documentului care va prelua titlul actuale de document:

var titlu = document.title;

Apoi vom crea o funcție nouă pentru a schimba șirul din acel titlu:

funcția changeTitle () count ++; var newTitle = '(' + număr + ')' + titlu; document.title = newTitle; 

Aici puteți vedea că folosim JavaScript ++ operator. În scopul demonstrației noastre ++ ne va crește numara numărul prin 1 pentru fiecare iterație. Așa cum am început cu asta 0, următoarea repetare va reveni 1. Noi folosim ++ operator pentru a simula creșterea numărului, deoarece nu avem acces la un API pentru a ne alimenta cu un număr real.

Apoi vom crea o altă funcție nouă care va rula changeTitle () funcţie:

funcția newUpdate () update = setInterval (changeTitle, 2000);  var docBody = document.getElementById ("site-body"); docBody.onload = newUpdate; 

Funcția de mai sus presupune că trebuie să verificăm fiecare actualizare nouă 2000 milisecunde (2 secunde). Funcția noastră, changeTitle (), va continua să ruleze în intervalul respectiv. Funcționăm această funcție imediat ce pagina este încărcată.

Prima metodă este destul de simplă. Extragem numărul și îl transmitem în titlu. Puteți schimba parantezele care împachetează numărul () la [] sau prin schimbarea lor în changeTitle () funcţie.

Utilizând aplicația Favicon

Acum vom încerca a doua abordare, și anume schimbarea favicon cum face aplicația web Trello. Pentru aceasta, va trebui să pregătim două variante favicon, unde a doua variantă este alternativa pe care o vom afișa ori de câte ori am primit noi actualizări.

Începeți prin conectarea primului favicon în document.

Apoi setați calea noului favicon într-o variabilă JavaScript.

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

Ca și în cazul primei abordări, vom crea și două funcții:

funcția changeFavicon () document.getElementById ('favicon'). href = iconNew;  funcția newUpdate () update = setInterval (changeFavicon, 3000); setTimeout (funcția () clarInterval (actualizare);, 3100);  var docBody = document.getElementById ("site-body"); docBody.onload = newUpdate; 

Prima funcție, changeFavicon (), va înlocui favicul nostru inițial cu cel cu insigna roșie. A doua funcție, actualizare noua(), va executa prima funcție în timpul specificat.

Se pare că este ceva nou de văzut!

A doua abordare nu este la fel de complicată cum ați fi avut prima idee; este, de fapt, mai simplu decât primul în care am actualizat șirul de titlu al paginii. În plus, putem vărsa mai multă creativitate în faviconul alternativ. De exemplu, am putea face insigna roșie clipește mai degrabă decât încă (fii atent acum ...), sau poate schimba întreaga culoare favicon și pictograma.

Notă: Chrome nu acceptă favicoane cu animație GIF.

Utilizând Favico.js

Pentru a termina, acum vom folosi o bibliotecă JavaScript denumită Favico.js, dezvoltată de Miroslav Magda. Biblioteca oferă un API la îndemână cu multe opțiuni pentru a modifica faviconul, cum ar fi afișarea unei insigne împreună cu numărul de actualizări toate împreună.

Pentru început, folosind JavaScript, definim un nou Favico care definește poziția insignei, animația, culoarea de fundal și culoarea textului.

var favicon = nou Favico (poziție: 'sus', animație: 'popFade', bgColor: '# dd2c00', textColor: '# fff0e2'); 

Apoi adaugam cateva functii pentru a rula acest nou exemplu si in cele din urma a arata insigna in favicon.

var num = 0; funcția generateNum () num ++; return num;  funcția showFaviconBadge () var num = generateNum (); favicon.badge (num);  funcția newUpdate () update = setInterval (showFaviconBadge, 2000);  var docBody = document.getElementById ("site-body"); docBody.onload = newUpdate; 

Codul seamănă oarecum cu prima metodă pe care am făcut-o mai devreme. Începem cu crearea funcției care va fi simula numărul de actualizări pe care le vom afișa în insignă. A doua funcție, showFaviconBadge (), este să introduceți numărul în insigna și să afișați insigna în favicon. Ultima funcție actualizare noua() va rula a doua funcție în intervalul de timp specificat, oferindu-ne un sentiment de a primi noi actualizări.

Concluzie

În acest tutorial am folosit fila browser ca mijloc de notificare a utilizatorilor. Am replicat metode care sunt frecvent aplicate pe site-uri populare precum Facebook, Twitter și Trello, împreună cu evaluarea limitărilor acestora.

Din nou, probabil că va trebui să faceți câteva modificări pentru ca acest lucru să se potrivească în aplicația dvs. web specială, dar exemplele de aici vă oferă un început excelent!