Immer mehr Webprojekte setzen immer mehr auf html5 Features. Die Browser aus alten Zeiten haben aber von diesen Features keine Ahnung. Möchte man die Kompatibilität zu alten Browsern wahren ist es ratsam zu prüfen ob der Browser eine dieser neuen Funktionen zur Verfügung stellt. Danach kann man dann entscheiden ob man den User darauf hinweist eine neue Browserversion zu verwenden oder ob das eigene Projekt einen Fallback anbietet. Auf jeden Fall besser, als das Javascript einfach in einen Fehler laufen zu lassen. Wie man eine kleine schnelle Feature-Detection in Javascript realisiert möchte ich in diesem Blogpost zeigen.
In meiner beispielhaften Anwendung möchte ich den Local-Storage benutzen um Daten zu speichern. Wie finde ich nun aber heraus ob der Browser des Benutzers es auch wirklich unterstützt?
Feature Detection mit dem Window Objekt
Dafür ist gar nicht so ein großer Aufwand nötig. Im Window Objekt des Browsers sind diese nämlich hinterlegt. In der Entwickler-Console kann man vorab einmal testen, was der eigene Browser so zur Verfügung stellt.
console.log(window.localStorage)
Unterstützt der Browser den Local-Storage werden in der Konsole alle Eigenschaften und Objekte des Storage Objektes zurückgegeben. Diese Erkenntnis kann man nun in eine Javascript-Funktion übertragen.
function hasStorage() {
if ('localStorage' in window) {
return true;
}
return false;
}Diese Funktion kann man nun in der gesamten Anwendung verwenden und so auf Verfügbarkeit bzw. nicht Verfügbarkeit des Local-Storage Features prüfen.
Weitere Features testen
Das Beispiel lässt sich natürlich auch auf andere html5 Features, wie z.B. Websockts anwenden.
if (WebSocket' in window)
Für eine hohe wiederverwendbarkeit empfiehlt es sich diese Funktionen in einer eigenen Library zu sammeln und von dort aus für seine eigenen Projekte zentral zu verwenden.