Wenn man eine Webseite für Google und damit für eine Menge unterschiedlicher Endgeräte optimiert, gibt es mittlerweile eine ganze Reihe von Tests, mit denen man seine Applikation auf die Performance hin testen kann. Dazu zählen nicht nur die Geschwindigkeit, der responsive Aufbau des HTML und das Nachladen von JavaScript Dateien. Bei Google Lighthouse ist dies auch der Test auf die Tauglichkeit einer Webseite als Progressive Web App (PWA).
Eigentlich ist es nicht viel, was man dafür tun muss, und es gibt mittlerweile einige Helferlein im Internet, mit denen man sich die eigene Grafikabteilung sparen kann. Im wesentlichen hinterlegt man ein Manifest in Form einer JSON Datei oder im originären Format mit Information zu Browser und Endgerät, welche Dateien zu bestimmten Zwecken und Zeitpunkten angezeigt werden sollen. Das bekannteste ist wahrscheinlich das Favorite Icon, welches nach dem Aufruf einer Seite in der Adressleiste erscheint. Das geht auf jedem Server.
Was TYPO3 angeht, sind allerdings zwei Punkte zu beachten. Zum einen: Hatte man früher ein Favicon von 16 mal 16 Pixel, so sind es heute mehr als 10 Dateien als .png und in anderen Formaten, die man für unterschiedliche Anwendungen hinterlegen kann. Diese kann man im Stammverzeichnis des Servers ablegen, was den Einstieg in das Projekt in IDE oder per FTP aber unübersichtlich machen kann. Eine andere Variante ist die Ablage im fileadmin von TYPO3. Ich habe mich für ein eigenes Verzeichnis auf dem Server entschieden, denn diese Bilder und Daten funktionieren außerhalb von TYPO3.
Nicht außerhalb von TYPO3, sondern Bestandteil des TypoScript Setup hingegen sind die <META> Angaben für den Browser, welche Quellen und Dateien für die Favorite Icons und andere Bilder zur Verfügung stehen. Diese müssen natürlich über TypoScript eingebunden werden. Dazu in wenigen Tagen mehr in unserem TYPO3 Tutorial.
Code Snippets und eine Beschreibung der manifest.json sowie der Einbindung aller Dateien in TypoScript finden sich nun hier: