201207Feb

Tinycon: Animierte Favicons für Benachrichtigungen

Viele Web-Applikation, die durch Ajax gestützt werden, geben Hinweise oder Meldungen aus, sobald ein bestimmtes Ereignis eingetroffen ist. Das betrifft beispielsweise das Empfangen einer Nachricht oder das generelle Aktualisieren von Inhalten. Da die meisten Benutzer häufig auf mehreren Seiten gleichzeitig unterwegs sind und geöffnete Webanwendungen gerne in einem separaten Tab abgelegt werden, bieten sich spezielle Methoden für das Anzeigen von Benachrichtigungen an. Neben dem dynamischen Ändern des Seitentitels wäre auch ein Hinweis durch ein aktualisiertes Favorite Icon (Favicon, 16×16 Pixel) denkbar.
Das Skript Tinycon ist genau darauf ausgelegt und ermöglicht es, eine Zahl auf dem aktuellen Favicon einer Seite anzuzeigen.

Tinycon - Favicon Alerts

Die Zahl kann also für die Anzahl neuer Nachrichten stehen und signalisiert dem Benutzer, das der Inhalt des Tabs aktualisiert wurde. Das Tinycon-Skript erlaubt es, die Darstellung des Bubbles anzupassen: Schriftart, Größe und Hintergrundfarbe können per Optionen festgelegt werden. Das Favicon wird dynamisch per Canvas erzeugt und über "toDataURL()" als Base64-Grafik eingebunden. Sollte HTML5/Canvas nicht vom Browser unterstützt werden, kann ein Fallback aktiviert werden, das dann nur den Seitentitel aktualisiert. Auf GitHub findet sich wieder der Quellcode des Projekts.