Hoe Update-meldingen worden weergegeven op het browsertabblad

Websites en web-apps met regelmatig bijgewerkte inhoud moeten een manier vinden om de aandacht van gebruikers te trekken om hen op de hoogte te brengen van updates, met name wanneer gebruikers zich mogelijk hebben verwijderd van het tabblad waar de website of app actief is. 

Er zijn een paar veelvoorkomende patronen die je in het wild zult zien. Sociale websites zoals Facebook, Twitter en LinkedIn, die mogelijk elke paar seconden nieuwe inhoud ontvangen, voegen het relevante nummer in de paginatitel en tonen het aantal nieuwe updates op het tabblad. Trello, aan de andere kant, toont een kleine rode badge op de favicon.

Trello-, Facebook- en Twitter-meldingen

In deze zelfstudie gaan we deze vorm van feedbackontwerp repliceren, gebruikmakend van het browsertabblad als medium om gebruikers op de hoogte te stellen van updates. Bekijk de demo en laat ons zien hoe het gedaan is.

De documenttitel gebruiken

We beginnen met het toevoegen van het aantal nieuwe updates aan de paginatitel, vergelijkbaar met Facebook en Twitter.

In een scenario in de echte wereld kunnen we gegevens op verschillende manieren ophalen (overleg met uw vriendelijke ontwikkelaar). In dit geval gaan we ervan uit dat we het aantal updates hebben opgehaald en hebben we het cijfer beschikbaar om mee te spelen in JavaScript. Voor nu lijkt het erop dat we momenteel nul-updates hebben, dus we geven dat nummer door aan een variabele:

var count = 0;

De volgende zal het vlees van onze code zijn waar we de titel van het document zullen veranderen. Allereerst toevoegen we document titel die onze huidige documenttitel zal ophalen:

var title = document.title;

Vervolgens maken we een nieuwe functie om de tekenreeks binnen die titel te wijzigen:

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

Hier kun je zien dat we het JavaScript gebruiken ++ operator. Voor de doeleinden van onze demonstratie de ++ zal onze verhogen tellen nummer door 1 voor elke iteratie. Zoals we begonnen 0, de volgende iteratie zal terugkeren 1. Wij gebruiken de ++ operator om het aantal incrementen te simuleren, omdat we geen toegang hebben tot een API om ons een reëel nummer te geven.

Vervolgens maken we een nieuwe functie die de changeTitle () functie:

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

De bovenstaande functie gaat ervan uit dat we elk om nieuwe updates moeten zoeken 2000 milliseconden (2 seconden). Onze functie, changeTitle (), zal continu binnen het interval lopen. We voeren deze functie uit zodra de pagina is geladen.

De eerste methode is vrij eenvoudig. We halen het nummer op en geven het door in de titel. U kunt de haakjes waaruit het nummer bestaat, wijzigen () naar [] of door ze te veranderen in de changeTitle () functie.

Gebruik van het Favicon

Nu gaan we de tweede benadering proberen, namelijk het veranderen van de favicon zoals de Trello-webapp. Hiervoor zullen we twee favicon-varianten moeten voorbereiden, waarbij de tweede variant het alternatief is dat we zullen laten zien telkens we nieuwe updates ontvangen.

Begin met het koppelen van het eerste favicon in het document.

Stel vervolgens het pad van het nieuwe favicon in een JavaScript-variabele in.

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

Net als bij de eerste benadering, zullen we ook twee functies creëren:

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; 

De eerste functie, changeFavicon (), zal onze eerste favicon vervangen door die met de rode badge. De tweede functie, nieuwe update(), voert de eerste functie uit binnen de opgegeven tijd.

Het lijkt erop dat er iets nieuws is om naar te kijken!

De tweede benadering is niet zo gecompliceerd als je misschien eerst dacht; het is in feite eenvoudiger dan de eerste waar we de paginatitelreeks hebben bijgewerkt. Bovendien kunnen we meer creativiteit in de alternatieve favicon gieten. We zouden bijvoorbeeld de rode badge kunnen maken knipperen in plaats van nog steeds (wees voorzichtig nu ...), of verander misschien de hele favicon-kleur en het pictogram.

Notitie: Chrome ondersteunt geen favicons met geanimeerde GIF.

Favico.js gebruiken

Om af te sluiten, gaan we nu een JavaScript-bibliotheek gebruiken genaamd Favico.js, ontwikkeld door Miroslav Magda. De bibliotheek biedt een handige API met tal van opties om de favicon te wijzigen, zoals het tonen van een badge samen met het aantal updates allemaal bij elkaar.

Om te beginnen, met behulp van JavaScript, definiëren we een nieuwe Favico instantie die de badgepositie, animatie, de achtergrondkleur en de tekstkleur definieert.

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

Vervolgens voegen we een aantal functies toe om dit nieuwe exemplaar uit te voeren en uiteindelijk de badge in het favicon te tonen.

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

De code lijkt enigszins op de eerste methode die we eerder hebben gebruikt. We beginnen met het creëren van de functie die zal simuleren het aantal updates dat we binnen de badge laten zien. De tweede functie, showFaviconBadge (), is om het nummer in de badge in te voegen en de badge in het favicon te tonen. De laatste functie nieuwe update() zal de tweede functie uitvoeren binnen het gespecificeerde tijdsinterval, waardoor we het gevoel hebben nieuwe updates te ontvangen.

Conclusie

In deze zelfstudie hebben we het browsertabblad als medium gebruikt om gebruikers op de hoogte te stellen. We hebben gerepliceerde methoden die vaak worden toegepast in populaire websites zoals Facebook, Twitter en Trello, samen met het evalueren van hun beperkingen.

Nogmaals, je zult waarschijnlijk een aantal wijzigingen moeten aanbrengen om dit passend te maken in je specifieke webapplicatie, maar de voorbeelden hier geven je een goed begin!