Freizeitprojekt: BrowserStartpage – das Speeddial für alle Browser

Erinnert ihr euch noch an die Zeit, als der Internet Explorer das Web quasi dominierte und es keine große Auswahl an Browsern gab?
Diese Zeiten gehören glücklicherweise längst der Vergangenheit an und wir haben eine große Auswahl an guten Browsern, zwischen denen wir wählen können. Jeder Browser hat seine Qualitäten und so ist es nicht immer ganz leicht, den passenden Browser für’s eigene Surfverhalten zu finden. Ich nutze aktuell den Mac sowohl beruflich, als auch privat und so haben sich bei mir mittlerweile vier von mir favorisierte Browser aus der Masse herauskristallisiert. Ich will es gleich vorweg nehmen, es sind die vier Browser, die jeder von uns kennt: Safari, Firefox, Chrome und – eventuell noch nicht so bekannt – Vivaldi.
Jeder mit seinen Vor- und Nachteilen, die ich hier kurz darlegen möchte:
(Du kannst diesen Abschnitt auch überspringen).

Safari

Der Browser wird mit macOS ausgeliefert und bietet neben einer guten Geschwindigkeit auch den praktischen iCloud-Sync, der unter anderem die Bookmarks zwischen den Geräten synchron hält. Die Entwicklerwerkzeuge sind solide. Leider fühlt sich der Browser für mich einfach zu "frickelig" an. Die Elemente der Benutzeroberfläche sind extrem klein und optisch fügt er sich zwar gut in macOS ein, aber Safari entspricht aktuell einfach nicht meinem Geschmack.

Firefox

Der Browser von Mozilla hatte als erster ernsthafter Konkurrent zum Internet Explorer seine Blütezeit und ist dann im Laufe der Zeit ins Hintertreffen geraten. Mittlerweile hat Mozilla das aber erkannt und entwickelt den Browser konsequent weiter. Er ist schnell, bietet einen Firefox-Sync und hat recht gute Entwicklerwerkzeuge. Ausserdem werden vom Browser selbst keine Daten an Google übergeben. Eigentlich der Browser meiner Wahl – wäre da nicht Googles Chrome.

Chrome

Google ist recht spät, aber doch sehr erfolgreich in den Browsermarkt eingestiegen. Nicht ohne Grund hat Chrome sich zum am weitesten verbreiteten Browser entwickelt. Chrome ist schnell, zuverlässig und bietet extrem gute Entwicklerwerkzeuge, die ständig weiterentwickelt werden. Man muss sich natürlich bewusst sein, dass Google ein Interesse daran hat, den Browser möglichst weit zu verbreiten. Google verkauft Werbung. Diese ist optimalerweise auf dein Surfverhalten zugeschnitten, um möglichst hohe Übereinstimmung der Interessen und somit höhere Klickraten auf die angezeigte Werbung zu erzielen. Das bringt unterm Strich mehr Einnahmen durch Werbung. Gibt es denn auch den Chrome ohne Google?

Vivaldi

Das Unternehmen, dass den Vivaldi-Browser entwickelt, wird von dem Ex-CEO von Opera, Jon von Tetzchner, geleitet und hat mit Vivaldi einen ziemlich guten Browser auf den Markt gebracht. Vivaldi basiert wie Chrome auf dem Projekt Chromium und enthält viele nützliche Funktionen. Splitscreen von Webseiten und die Webpaneele sind aus meiner Sicht die Highlights. Die Entwicklerwerkzeuge entsprechen denen von Chrome – werden in der Regel aber immer erst ein wenig später aktualisiert. Leider reagiert Vivaldi hier und da etwas träge, was sich aber mit ein paar Anpassungen in der Konfiguration beheben lässt. (Hier der Link zu den entsprechenden Anpassungen: https://www.ghacks.net/2017/02/13/how-to-speed-up-the-vivaldi-web-browser/
Leider ist Vivaldi auch der einzige Browser, der aktuell noch ohne Sync daherkommt.

Browserswitching und Speeddials

Wie du schon siehst, hat jeder Browser seine Vor- und Nachteile und auch mir fällt es da nicht immer leicht, meinen Favoriten zu wählen. Aktuell nutze ich, wie schon erwähnt, den Firefox (in der Developer-Edition). Ein Umstieg von einem Browser auf den nächsten ist meist kein großes Problem. Die Bookmarks lassen sich in der Regel problemlos im neuen Browser importieren.
Alle Browser bringen mittlerweile ein Speeddial mit sich. In einem Speeddial werden in der Regel die am häufigsten besuchten Seiten gespeichert und meist kann man seine favorisierten Webseiten hier "anpinnen", so dass sie nicht durch andere Seiten ersetzt werden. Leider sind die Speeddials auch beim Wechsel eines Browsers das große Problem. Sie lassen sich in der Regel nicht einfach mit in den neuen Browser übernehmen, oder sie werden nicht zwischen den Geräten snychronisiert.

Das Projekt BrowserStartpage

Das ist auch der Auslöser für mein Projekt BrowserStartpage gewesen. Ich war an dem Punkt angekommen, dass ich meine Lesezeichen kaum noch genutzt habe und meine wirklich oft benutzen Links in einem Speeddial hinterlegt waren. Wie sollte ich diese mit in einen anderen Browser übernehmen oder zwischen den Browsern synchron halten? Im neuen Browser alle Links manuell neu anlegen? Warten, bis der neue Browser die Seite selbstständig neu aufgebaut hatte? Nein, das war alles keine gute Lösung. Ich begann, mir ein eigenes Speeddial zu konzeptionieren und zu entwickeln.

Die Anforderungen

Die initialen Anforderungen an das Speeddial waren schnell aufgenommen:

  • es soll auf einem eigenen Webserver gehostet werden können
  • es soll auf allen Geräten funktionieren, also auch responsiv
  • es soll die Möglichkeit bieten, den Inhalt in mehrere Bereiche zu gliedern – Stichwort "Tabs"
  • das aktuell geöffnete Tab soll im Browser gespeichert werden, damit die Seite beim nächsten Aufruf so geöffnet wird, wie ich sie verlassen habe
  • das Speeddial soll möglichst wenig Anfragen an den Webserver stellen, um eine hohe Geschwindigkeit auch auf mobilen Geräten zu erreichen
  • die Pflege soll recht einfach und später auch automatisierbar sein
  • es soll später die Möglichkeit geben, eigene Themes erstellen zu können, um die Seite an den eigenen Geschmack anpassen zu können
  • es soll später ein export der Seite möglich sein, damit das Speeddial auch ohne einen eigenen Webserver funktioniert und synchronisiert werden kann. Zum Beispiel als statische Seite, synchronisiert über die Dropbox

Von der Idee zur Umsetzung

Ich begann, einen ersten, statischen Prototypen zu erstellen. Eine Sammlung von Links, dekoriert mit Screenshots. Das war ein ziemlich guter Start. Ich synchronisierte das Ergebnis via iCloud und legte die Seite in allen Browsern als Startseite an.

Die Tabs

Die Tabs mussten logischerweise mit Javascript realisiert werden. Mit jQuery kein großes Problem – da ich aber so wenig Requests und so wenig Traffic wie möglich erzeugen wollte, begann ich, die Tabs mit regulärem Javascript umzusetzen. Das würde mir die ca. 80kB der jQuery-Bibliothek einsparen.
Die Seite sollte auch ohne Javascript funktional sein, da sich z.B. in der iCloud auf mobilen Geräten kein Javascript ausführen lässt. Daraus ergab sich der Fallback, dass die Tabs bei Klick zu den entsprechenden Bereichen springen würden, statt sie umzuschalten. Die Seite würde nun ohne Javascript funktionieren – man nennt dies auch progressive Enhancement.

Nun galt es den zuletzt geöffneten Tab zu speichern. Ich entschied mich, hier das localStorage zu nutzen – ein kleiner lokaler Speicher, der vom Browser genutzt werden kann. Die ID des aktuell geklickten Tabs wird dort gespeichert und beim nächsten Aufruf ausgelesen. Ist diese ID nicht oder nicht mehr im Speeddial vorhanden, wird die Default-ID verwendet. Dasließe sich auch alles mit einem Cookie realisieren, aber im Gegensatz zum localStorage lassen sich diese recht einfach löschen

Minimierung der Aufrufe

Im nächsten Schritt wollte ich das Caching der Dateien optimieren, so dass der Browser nur Dateien herunterlädt, die auch wirklich geändert wurden. Ich wollte auf dem iPhone möglichst wenig Daten über das mobile Netz übertragen. Ich entschied mich, den Application-Cache zu nutzen. Dies wird über eine Manifest-Datei realisiert, in der alle Dateien gelistet sind, die der Browser lokal speichern soll.
Ist der Webserver einmal nicht erreichbar, kann die Seite trotzdem genutzt werden, da die Daten beim ersten Aufruf lokal gespeichert werden. Auch ein erzwungener Reload im Browser setzt die Seite dann nicht ausser Betrieb. Ein weiterer, praktischer Vorteil der Umsetzung ist dabei, dass das Speeddial auch funktionsfähig ist, falls der Webserver einmal nicht antworten sollte.

Das von mir erstellte Javascript und das CSS werden mittlerweile direkt in die Seite eingeladen, um weitere Requests zu vermeiden.

Pflege der Daten

Da ich plane, dass das Speeddial irgendwann direkt auf der Seite geändert werden soll, wollte ich die darzustellenden Inhalte in eine Datei auslagern. Eine Konfigurationsdatei, wenn man so will. Da die späteren Änderungen im Speeddial vermutlich via Javascript realisiert werden würden, entschied ich mich dafür, für die Konfiguration der Inhalte das json-Format zu wählen. Aktuell werden in der json-Datei folgende Inhalte angegeben:

  • Namen und Struktur der Tabs
  • Linkziele der Kacheln
  • Grafiken für den Link
  • Beschreibung des Links

Diese Inhalte werden aktuell per PHP eingelesen und daraus das Speeddial erstellt. Das statische HTML wird aktuell nicht mehr verwendet. Ausserdem wird der bereits erwähnte Application-Cache ebenfalls dynamisch aufgebaut. Der Vorteil ist nun, dass weitere Tabs und Links in der json-Datei angegeben werden können. Der Application-Cache wird dann ohne weiteres Zutun aktualisiert und die Seite ist im Ergebnis nun relativ einfach zu erweitern. Lediglich die Grafiken für die Links müssen noch manuell erstellt werden, aber auch das lässt sich später sicher automatisieren.

CSS und Javascript

Das Javascript wird, wie ich schon erwähnte, mittlerweile direkt in die Seite eingeladen, existiert aber, wie das CSS auch als eigene Datei auf dem Server. Sowohl Javascript als auch CSS werden mittels Gulp generiert. Dabei werden Zeilenumbrüche und Leerzeichen entfernt, um Daten zu sparen. Das CSS wird mittels SCSS entwickelt, um später das Theming zu erleichtern.

Hol dir das Speeddial

Das Speeddial wird von mir in einer lokalen PHP-Umgebung entwickelt. Ich simuliere hier einen PHP-fähigen Webserver mittels Vagrant. Wenn das für dich alles böhmische Wälder sind, ist das kein Problem – alle relevanten Daten für die Nutzung des Speeddial befinden sich in einem Verzeichnis. Die PHP-Umgebung benötigst du nur, wenn du auf dem Projekt aufbauen möchtest.

Du findest das Speeddial auf Github. Dort kannst du dir alle Dateien herunterladen. Eine Demoversion des aktuellen Standes findest du hier http://www.metafolio.de/fragments/startpage/

Hier sind nur wenige Links hinterlegt, aber es sind ausreichend viele, um die Funktionalität zu testen.

Alle Dateien und eine Dokumentation in englischer Sprache findest du auf Github unter https://github.com/saschadiercks/browserStartpage

Ich hoffe, das Speeddial wird dir genau so nützlich sein wie mir. Zwischen den Browsern zu wechseln oder verschiedene Browser gleichzeitig zu nutzen ist nun kein Problem mehr – alle nutzen das gleiche Speeddial.

Ach ja, die hier beschriebenen Browser habe ich in der Demo-Datei ebenfalls verlinkt.

Falls ihr euch fragt, wie ich die Screenshots in den Geräten erstellt habe: Mit Magic Mockup könnt ihr eure Screenshots in die entsprechenden Vorlagen einfügen.

Leser schrieben dazu:

    • Sascha Diercks

      Hey, vielen Dank und danke auch für den Hinweis :)
      Ich habe hier bewusst -noch- nicht auf Service Workers gesetzt, da dies die Verwendung von https voraussetzt. Leider steht mir zum aktuellen Zeitpunkt noch kein entsprechender Server für das Testing zur Verfügung, aber ich denke, auf lange Sicht werde ich das Projekt sicher noch entsprechend anpassen.

Ihre Meinung interessiert mich sehr: