Slik viser du oppdateringsvarsler i nettleserfanen

Nettsteder og webapper med ofte oppdatert innhold må finne ut hvordan man kan ta tak i brukerens oppmerksomhet om å fortelle dem om oppdateringer, spesielt der brukerne kan ha flyttet vekk fra kategorien der nettstedet eller appen er aktiv. 

Det er et par vanlige mønstre som du vil se ut i naturen. Sosiale nettsider som Facebook, Twitter og LinkedIn, som potensielt mottar nytt innhold hvert par sekunder, legger inn det aktuelle nummeret i sidetittelen som viser mengden nye oppdateringer i kategorien. Trello, derimot, viser et lite rødt merke på favicon.

Trello, Facebook og Twitter varsler

I denne opplæringen skal vi kopiere denne form for tilbakemeldingsdesign, ved å bruke nettleserfanen som et medium for å varsle brukere om oppdateringer. Sjekk ut demoen og la oss se hvordan det er gjort.

Bruke dokumenttittel

Vi begynner med å legge til antall nye oppdateringer til sidetittelen, ligner på hvordan Facebook og Twitter gjør.

I en ekte verdensscenario kan vi hente data på en rekke måter (snakk med din vennlige utvikler). I dette tilfellet antar vi at vi har hentet antall oppdateringer og har figuren tilgjengelig for oss å spille med i JavaScript. For nå ser det ut til at vi for øyeblikket har null oppdateringer, så vi sender det nummeret til en variabel:

var teller = 0;

Det neste blir kjøttet i koden der vi vil endre dokumenttittelen. Først av alt legger vi til dokument tittel som henter vår nåværende dokumenttittel:

var title = document.title;

Deretter oppretter vi en ny funksjon for å endre strengen innenfor den tittelen:

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

Her kan du se at vi bruker JavaScript ++ operatør. For vår demonstrasjons formål ++ vil øke vår telle nummer ved 1 for hver iterasjon. Som vi startet med 0, neste iterasjon kommer tilbake 1. Vi bruker ++ operatør for å simulere antallet økning, siden vi ikke har tilgang til en API for å gi oss et ekte nummer.

Deretter oppretter vi en ny funksjon som kjører changeTitle () funksjon:

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

Ovennevnte funksjon antar at vi må sjekke om nye oppdateringer hver 2000 millisekunder (2 sekunder). Vår funksjon, changeTitle (), vil kontinuerlig løpe innenfor intervallet. Vi kjører denne funksjonen så snart siden er lastet inn.

Den første metoden er ganske enkel. Vi henter nummeret og sender det i tittelen. Du kan endre parentesene som pakker nummeret fra () til [] eller ved å endre dem i changeTitle () funksjon.

Bruke Favicon

Nå skal vi prøve den andre tilnærmingen, som er å endre favicon som Trello web app gjør. For dette må vi forberede to favikonvarianter, hvor den andre varianten er alternativet som vi vil vise når vi mottok nye oppdateringer.

Begynn med å koble det første faviconet i dokumentet.

Sett deretter banen til det nye faviconet i en JavaScript-variabel.

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

Som med den første tilnærmingen, vil vi også skape to funksjoner:

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

Den første funksjonen, changeFavicon (), Vil erstatte vår første favicon med den med den røde merket. Den andre funksjonen, ny oppdatering(), vil utføre den første funksjonen innen den angitte tiden.

Det virker som det er noe nytt å se på!

Den andre tilnærmingen er ikke så komplisert som du kanskje har tenkt første gang; Det er faktisk enklere enn den første der vi oppdaterte sidetittelstrengen. I tillegg kan vi helle mer kreativitet inn i det alternative faviconet. For eksempel kan vi lage det røde merket blinker heller enn fortsatt (vær forsiktig nå ...), eller kanskje endre hele favicon farge og ikon.

Merk: Chrome støtter ikke favikoner med animert GIF.

Bruke Favico.js

For å fullføre, skal vi nå bruke et JavaScript-bibliotek kalt Favico.js, utviklet av Miroslav Magda. Biblioteket gir en praktisk API med tonnevis av alternativer for å endre favicon, for eksempel å vise et merke sammen med antall oppdateringer alt sammen.

Til å begynne med bruker vi JavaScript, definerer vi en ny Favico forekomst som definerer merket posisjon, animasjon, bakgrunnsfarge samt tekstfarge.

var favicon = ny Favico (posisjon: 'opp', animasjon: 'popFade', bgColor: '# dd2c00', textColor: '# fff0e2'); 

Deretter legger vi til et par funksjoner for å kjøre denne nye forekomsten og til slutt vise merket i faviconet.

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

Koden ligner noe på den første metoden vi gjorde tidligere. Vi begynner med å skape den funksjonen som vil simulere Antall oppdateringer som vi vil vise innenfor merket. Den andre funksjonen, showFaviconBadge (), er å sette inn tallet i merket og vise merket i faviconet. Den siste funksjonen ny oppdatering() Kjører den andre funksjonen innenfor det angitte tidsintervallet, noe som gir oss en følelse av å motta nye oppdateringer.

Konklusjon

I denne opplæringen har vi brukt nettleserfanen som et medium for å varsle brukere. Vi har replikert metoder som vanligvis brukes på populære nettsteder som Facebook, Twitter og Trello sammen med å evaluere sine begrensninger.

Igjen må du sannsynligvis gjøre et par endringer for å få det til å passe det i ditt eget webprogram, men eksemplene her gir deg en god start!