Så här visar du uppdateringsmeddelanden i fliken Browser

Webbplatser och webbapps med ofta uppdaterat innehåll måste hitta ett sätt att fånga användarnas uppmärksamhet att berätta om uppdateringar, särskilt där användare kan ha flyttat från fliken där webbplatsen eller appen är aktiv. 

Det finns ett par vanliga mönster som du ser ut i naturen. Sociala webbplatser som Facebook, Twitter och LinkedIn, som eventuellt tar emot nytt innehåll varje några sekunder, sätter in det aktuella numret i sidtiteln som visar hur många nya uppdateringar som finns på fliken. Trello å andra sidan visar ett litet rött märke på favicon.

Trello, Facebook och Twitter-meddelanden

I denna handledning kommer vi att replikera denna form av feedbackdesign, med hjälp av webbläsarfliken som ett medium för att anmäla användare av uppdateringar. Kolla in demoen och låt oss se hur det är gjort.

Använda dokumenttiteln

Vi börjar med att lägga till antalet nya uppdateringar till sidtiteln, som hur Facebook och Twitter gör det.

I ett verkligt scenario kan vi hämta data på ett antal sätt (prata med din vänliga utvecklare). I det här fallet antar vi att vi har hämtat antalet uppdateringar och har den figur som är tillgänglig för oss att spela med i JavaScript. För närvarande verkar det som om vi för närvarande har noll uppdateringar, så vi skickar det numret till en variabel:

var räknat = 0;

Nästa blir köttet i vår kod där vi ändrar dokumenttiteln. Först och främst lägger vi till dokument titel som hämtar vår nuvarande dokumenttitel:

var title = document.title;

Då skapar vi en ny funktion för att ändra strängen inom den här titeln:

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

Här kan du se att vi använder JavaScript ++ operatör. För vår demonstrationens ändamål ++ kommer att öka vår räkna nummer vid 1 för varje iteration. När vi började med 0, nästa iteration kommer tillbaka 1. Vi använder ++ operatör för att simulera antalet inkrement, eftersom vi inte har tillgång till ett API för att mata oss med ett riktigt nummer.

Därefter skapar vi en ny funktion som kommer att springa changeTitle () fungera:

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

Ovanstående funktion förutsätter att vi behöver söka efter nya uppdateringar varje gång 2000 millisekunder (2 sekunder). Vår funktion, changeTitle (), kommer kontinuerligt att löpa inom intervallet. Vi kör denna funktion så snart sidan är laddad.

Den första metoden är ganska okomplicerad. Vi hämtar numret och skickar det i titeln. Du kan ändra parentesen som sätter in numret från () till [] eller genom att ändra dem i changeTitle () fungera.

Använda Favicon

Nu ska vi försöka det andra tillvägagångssättet, vilket är att ändra favicon som Trello web app gör. För detta måste vi förbereda två favikonvarianter, där den andra varianten är det alternativ som vi kommer att visa när vi fått nya uppdateringar.

Börja med att länka det första favikonet i dokumentet.

Ställ sedan in det nya favikonets väg i en JavaScript-variabel.

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

Liksom med det första tillvägagångssättet skapar vi också två funktioner:

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

Den första funktionen, changeFavicon (), kommer att ersätta vår första favicon med den med den röda märken. Den andra funktionen, ny uppdatering(), kommer att exekvera den första funktionen inom den angivna tiden.

Det verkar att det finns något nytt att titta på!

Det andra tillvägagångssättet är inte så komplicerat som du kanske har tänkt första gången; Det är faktiskt enklare än den första där vi uppdaterade sidtiteltrådet. Dessutom kan vi hälla mer kreativitet till det alternativa favikonet. Till exempel kan vi göra det röda märket blinkning snarare än fortfarande (var försiktig nu ...), eller kanske ändra hela favicon färg och ikon.

Notera: Chrome stöder inte favicons med animerad GIF.

Använda Favico.js

För att avsluta ska vi nu använda ett JavaScript-bibliotek som heter Favico.js, utvecklat av Miroslav Magda. Biblioteket tillhandahåller ett praktiskt API med många alternativ för att ändra favicon, som att visa ett märke tillsammans med antalet uppdateringar alla tillsammans.

Till att börja med använder vi JavaScript, definierar vi en ny Favico exempel som definierar badge position, animering, bakgrundsfärg samt textfärg.

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

Sedan lägger vi till ett par funktioner för att köra den här nya instansen och i slutändan visa märket i favicon.

var num = 0; funktionen genereraNum () num ++; returnera num;  funktion showFaviconBadge () var num = generateNum (); favicon.badge (num);  funktionen newUpdate () update = setInterval (showFaviconBadge, 2000);  var docBody = document.getElementById ("site-body"); docBody.onload = newUpdate; 

Koden något liknar den första metoden vi gjorde tidigare. Vi börjar med att skapa den funktion som ska simulera Antalet uppdateringar som vi kommer att visa inom märket. Den andra funktionen, showFaviconBadge (), är att infoga numret i märket och visa märket i favicon. Den sista funktionen ny uppdatering() kommer att köra den andra funktionen inom det angivna tidsintervallet, vilket ger oss en känsla av att få nya uppdateringar.

Slutsats

I den här handledningen har vi använt webbläsarfliken som ett medium för att meddela användarna. Vi har replikerat metoder som vanligtvis används på populära webbplatser som Facebook, Twitter och Trello tillsammans med utvärdering av deras begränsningar.

Återigen måste du förmodligen göra ett par ändringar för att passa det i din speciella webbapplikation, men exemplen här ger dig en bra start!