synchronisierte Schnellzugriffe + mehr
Individuelle Browser-Startseite (selber gehostet) mit mehreren nützlichen Funktionen
Eine Startseite für den Browser mit Favoriten ist sinnvoll, das Synchronisieren über mehrere Geräte eine Datenschutzfrage. Meine Startseite zeigt zudem aktuelle Kalender-Termine an, die Nachrichten, das Wetter, besitzt ein Notizbuch und wird selber gehostet.
Meine Startseite ist auf allen meiner Geräte die selbe, mit den selben Daten, welche natürlich über ein Backend konfiguriert werden können.
Ich wollte schon immer eine elegante Startseite für die Browser aller meiner Geräte (PC, Smartphone, Tablet, Laptop, SmartTV, …) haben, deren Einträge synchronisiert werden bzw. auf allen Klienten gleich sind. Vermutlich gibt es so etwas. Aber dann liest ja ein Anbieter mit. Außerdem möchte ich auf der Startseite des Browsers noch mehr darstellen können als nur die Schnellzugriffe zu meinen Lieblingsseiten.
Bei den meisten Browsern kann man innerhalb der Konfiguration auch eine externe Seite als Startseite definieren. Und eine solche habe ich mir erstellt – genau auf meine Bedürfnisse zugeschnitten.
Ich habe mir so etwas also einfach selber programmiert x und biete sie auch kostenlos zum Download an. Alle Daten sind zentral gespeichert und durchlaufen keinen Drittanbieter. Zunächst zeige ich alle Funktionen.
x Ich bin kein richtiger Programmierer, aber verstehe mich auf Webdesign. Den funktionellen Code hatte für mich – nach langem Hin und Her – eine KI erledigt.
Meine Startseite: Das Frontend
Auf allen meiner Geräte (auf unterschiedlichen Browsern) habe ich stets die selbe Startseite:
So schaut das Frontend aus, also die Übersichtsseite. Wie man sieht, gibt es hier diverse Einträge. Alles wird extern auf einem eigenen Server (es gehen auch kostenlose) gespeichert. Somit habe ich alle Einträge synchron auf allen angemeldeten Geräten parat und es liest niemand mit. Denn bei allen mir bekannten Browsern kann man als Startseite auch eine externe Internetseite definieren. Und eine solche ist meine ja eigentlich auch. Natürlich muss man einmalig zunächst ein Passwort eingeben bzw. sich anmelden. Sonst hätte ja jeder Zugriff auf die eigenen Daten. Dazu später mehr.
Favoriten
Das Wichtigste bei so einer Browser-Startseite sind die individuellen Favoriten bzw. die Schnellzugriffe für Websites, welche man regelmäßig besucht. Im Backend meiner Anwendung (dem Administrationsbereich) kann man diese bequem anlegen und auch verschieben. Außerdem wird das aktuelle Icon der jeweiligen Website geholt und lokal gespeichert. Noch einmal: Da hier alles auf einem externen (eigenen) Server gespeichert wird, erfährt niemand sonst von der eigenen Vorlieben-Sammlung x und sie steht dann für alle eigenen Geräte gleich zur Verfügung.
x Sofern man keine Screenshots davon ins Internet stellt.
Kalender
Es können in einer config-Datei die Zugangsdaten für einen „CalDAV-Kalender“ eingetragen werden. Dann werden die heutigen und die morgigen Kalenderdaten gezogen bzw. deren Titel angezeigt. Leider müssten hierfür diese Zugangsdaten im Klartext hinterlegt werden. Daher ist diese Funktion optional. Wenn man hier nichts einträgt, wird der Kalender einfach nicht angezeigt. Wer nicht weiß, was ein CalDAV-Kalender ist, kann diesen Schritt überspringen.
Wetterbericht
Es kann das aktuelle Wetter und eine Prognose für die nächsten drei Tage angezeigt werden. Hierzu benötigt man einen kostenlosen Account bei OpenWeatherMap. Im Backend meiner Browser-Startseite muss man dann den eigenen API-Key eintragen, welchen man bei OpenWeatherMap generieren kann. Außerdem muss man den Namen des gewünschten Ortes hinterlegen und das Länderkürzel (z. B. „DE“).
Wird dies im Administrationsbereich nicht hinterlegt, erscheint die Wetter-Anzeige einfach nicht. Diese Wetterdaten sind natürlich nur grobe Werte bzw. stellen einen Durchschnitt aus mehreren Einzeldaten der Prognose dar. Wer bereits ein Wetter-Widget auf dem „Home-Screen“ des Smartphone hat, benötigt dies sicherlich nicht. Außerdem lädt die Startseite schneller, wenn nicht jedes Mal Wetterdaten gezogen- bzw. berechnet werden müssen. Ein Cache wäre sinnvoll, aber derzeit nicht integriert.
Die eigene, selber betriebene Startseite kann man natürlich auch auf dem Browser für den SmartTV bewundern und man hat dann auch dort alle persönlichen Daten parat. Den eigentlichen Hintergrund bezüglich des SmartTV erkläre ich etwas weiter unten.
Weiter zum nächsten Feature:
Nachrichten
Im Backend kann dann auch ein s. g. RSS-Feed definiert werden – z. B. https://www.welt.de/feeds/latest.rss. Dann „zieht“ die Startseite beim erneuten Aufruf die jeweils dort neu erschienenen Artikel bzw. stellt sie mit Vorschaubild und Überschrift ansehnlich dar (sofern je vom Feed unterstützt).
Ich habe darauf geachtet, dass es einen Mehr-laden-Button gibt. Warum? Zum einen, um Platz innerhalb der Übersicht zu sparen. Zum anderen dient dies aber auch dazu, dass im Betrieb mit einem Smartphone (mobile Daten) die mitunter relativ großen Bilddateien nur dann nachgeladen werden, wenn man dies wünscht und nicht immer beim erneuten Aufruf meiner Browser-Startseite. Dies geht schneller und man geht dann sparsamer mit dem eigenen Datenvolumen um.
Notizbuch
Eine besonders praktische Funktion ist das Notizbuch. Innerhalb dieses Formulars kann man beliebige Texte speichern. Natürlich erscheinen diese dann sofort auch auf allen anderen Geräten, bei denen in deren Browser die eigene Startseite definiert- und man via Passwort angemeldet ist. Somit ist das kopieren von Texten zwischen Geräten sehr einfach.
Angenommen, ich liege mit meinem Smartphone auf dem Sofa und ich habe plötzlich einen Geistesblitz. Dies notiere ich im „Notizbuch“ meiner Startseite und speichere dies. Später am PC kann ich diesen Text dann kopieren, da ich dort ja im Browser auch meine Startseite nutze. So etwas geht natürlich elaborierter mit einer (selber gehosteten) synchronisierten Notiz-Software wie beispielsweise »Joplin«.
Der eigentliche Grund für mein Notizbuch war aber mein SmartTV:
Ich lese nämlich häufig via Tablet oder Smartphone Internetforen und bisweilen gibt es dort Vorschläge zu bestimmten Inhalten in den Mediatheken des öffentlich rechtlichen Rundfunks. Ich kopiere diese Links also in die Notizfunktion meiner Browser-Startseite, rufe diese via dem Browser am Fernseher auf und klicke auf die Links. Dann öffnet sich sofort die jeweilige App mit dem gewünschten Inhalt – z. B. die ARD-Mediathek-App.
Das ist sehr praktisch. Mein Notizbuch verwandelt nämlich alle gespeicherten URLs (Internetadressen) im Formular unten in klickbare Buttons. Die aktuelle Uhrzeit wird hier auch noch angezeigt. Aber dies ist Spielerei.
Darkmode
Da ich viel abends, im Dunkeln lese, war mir ein Darkmode wichtig – ein dunkler Modus also:
Wenn man ein Betriebssystem bzw. einen unterstützen Browser mit „Darkmode“ nutzt, schaltet das Design der Startseite automatisch entsprechend um. Das blendet dann abends im Bett nicht so.
Ohne Anmeldung sieht man nichts
Bevor man Zugriff auf die Inhalte der Startseite hat, muss man sich natürlich anmelden:
Das Passwort muss man vorher in der Datei /config.php eintragen. Dies ist kein Klartext-Passwort. Man muss es vorher via dem im Programmpaket enthaltenen „Passwort-Hashgenerator“ umwandeln. Diesen Generator ruft man über den Browser auf: meine-startseite.meine-domain.de/assets/tools/passwort-hashgenerator.php. Den somit generierten Hash trägt man dann in die config.php ein. Danach hat man Zugriff auf die (noch leere) Startseite und auf den Admin-Bereich.
Man bleibt dann auf dem jeweiligen Gerät mehrere Monate mittels einem Cookie fest eingeloggt. Möchte man den Cookie löschen, kann man dies über einen kleinen Button im Admin-Bereich („geöffnete Tür“) tun.
Der Administrationsbereich: Das Backend
Unten rechts auf der Startseite gibt es ein kleines Zahrad-Symbol. Über dieses gelangt man in das Backend – in den Administrationsbereich, natürlich nur, wenn man angemeldet ist:
Hier kann man dann neue Favoriten anlegen und vorhandene mittels Maus verschieben. Sollte beim Anlegen eines Links nicht das Website-Icon („Favicon“) geladen werden, kann man eine beliebige Bilddatei für jede Website definieren. Hierzu muss man das Lesezeichen jedoch erneut anlegen. Ansonsten wird ein Fallback-Icon genutzt (Hand mit Zeigefinger).
Diese Icons / Bilder werden lokal auf dem Server gespeichert bzw. auch wieder gelöscht, wenn man ein Lesezeichen wieder entfernt.
Zum Eintragen der Api für die OpenWeatherMap hatte ich oben ja bereits einige Worte verloren. Man kann diese Felder auch leer lassen. Dann wird auf der Browser-Startseite eben kein Wetterbericht angezeigt. Dies verbessert dann auch die Ladezeit.
Auch zum RSS-Feed hatte ich weiter oben bereits Tipps gegeben. Eine Übersicht über solche findet man beispielsweise auf dieser Seite. Wenn man einen RSS-Aggregator nutzt wie »FreshRSS«, »Feedly« oder »The Old Reader«, können natürlich auch mehrere externe Feeds kombiniert werden und man trägt hier nur den „End-Feed“ des Aggregators ein. Es kann zudem die Menge der Artikel auf der Startseite begrenzt- und die zunächst sichtbare Anzahl definiert werden.
Installation
Man benötigt, wie gesagt, eigenen Webspace. Denn irgendwo muss die Startseite bzw. diese Website – denn eine solche ist sie ja – stets abrufbar gespeichert werden. Dies funktioniert auch bei kostenlosen Anbietern. Ein solcher wäre z. B. lima-city oder bplaced. Der Anbieter muss jedoch PHP bereit stellen – was heute eigentlich überall der Fall ist. Außerdem sollte es sich um einen Server auf ›Apache‹ basierend handeln – was i. d. R. der Fall sein dürfte, nicht aber auf ›nginx‹. Grund sind die dadurch automatisch gesetzten Sicherheitsvorkehrungen, was das Verhindern des Auslesens der Daten-Dateien von extern anbelangt („.htaccess“).
Die Daten aus der entpackten Zip-Datei muss man dann mittels einem FTP-Programm auf den Webserver laden. Bitte sehen Sie es mir nach, wenn ich hierzu keine detaillierte Anleitung schreibe. Das Thema ist etwas komplexer.
Editieren der config.php
Nachdem man die Daten auf den Webserver geladen hat, muss nachträglich die /config.php mit einem reinen Texteditor (z. B. Notepad; nicht Word) editiert werden:
// Passwort für Login; siehe /assets/tools/passwort-hashgenerator.php 'password_hash' => 'XYZ', // Kalender-Zugangsdaten 'calendar' => [ // Daten leer lassen, wenn kein Kalender angezeigt werden soll. 'url' => 'https://mein-server.de/dav.php/calendars/username/default/', 'username' => 'username', 'password' => 'meinpasswort',
Den Generator für einen Hash des gewünschten Passwortes erreicht man unter: meine-startseite.meine-domain.de/assets/tools/passwort-hashgenerator.php
Die Kalenderdaten kann man leer lassen. Wenn man weiß, was ein CalDAV-Kalender ist bzw. einen solchen eingerichtet hat, kann man hier die Zugangsdaten eintragen. Vorsicht: Dies wäre im Klartext.
Danach muss man diese Datei natürlich erneut auf den Server laden bzw. die vorhandene überschreiben.
Keine Datenbank nötig
Zur Installation meiner Startseite (eigentlich ja eine Website), ist keine Datenbank nötig. Alle eingetragenen Daten werden lokal innerhalb von Dateien gespeichert. Diese Dateien sind auch geschützt, dass sie nicht mittels einem Browser abgerufen- bzw. ausgelesen werden können – Das hoffe ich zumindest.
Beschreibbare Dateien
Da keine Datenbank genutzt wird, müssen einige Dateien auf dem Server beschreibbar sein:
- /assets/tokens.json (für die Cookies angemeldeter Nutzer)
- /assets/data/links.json (die angelegten Favoriten)
- /assets/data/notes.json (die eingetragenen Notizen)
- /assets/data/rss.json (die angegebene Nachrichten-Feed-URL)
- /assets/data/weather (die eingetragenen Wetterdaten)
Mit dem FTP-Programm sollten diese auf chmod 0644 gesetzt werden, falls ein Speichern / Aktualisieren über die Formulare nicht gelingt. Normalerweise werden diese Dateien bereits beschreibbar sein.
Außerdem muss das Verzeichnis /assets/favicons/ beschreibbar sein (chmod 0755). Darin werden die einzelnen Website-Icons abgespeichert. Auch dieses sollte normalerweise per se beschreibbar sein.
Alles ohne Gewähr
Natürlich gebe ich keine Gewähr auf volle Funktionalität und schon gar keine auf Sicherheit. Wer meine kostenlose Startseite einsetzt, tut dies auf eigenes Risiko. Doch wenn man den Kalender nicht nutzt und nichts Sensibles in das Notizbuch einträgt, sollte man hiermit eine Browser-Startseite erhalten, welche datenschutzfreundlich- und deutlich besser ist als die in den Browsern integrierten (Google liest mit) oder die von Fremdanbietern. Der Code kann für die eigenen Bedürfnisse auch gerne editiert werden. Ich erhebe darauf keine Rechte.
Download
Meine Browser-Startseite (also das gesamte Website-Paket) kann man sich hier als Zip-Datei herunter laden:
Das Passwort zum Entpacken lautet: klickgutachter.de
Es gib natürlich noch viele andere Projekte, welche eine solche Startseite für die Browser der eigenen Geräte anbieten. Diese sind jedoch alle auf „hübsch“ gemacht bzw. ich vermisse dort Funktionen wie mein ›Notizbuch‹. Zudem kenne ich mich nicht mit „Docker“ und ähnlichem aus, bzw. konnte die tatsächlich interessanten nicht installieren. Daher die Eigenlösung.