Progressive Web App (PWA) in TYPO3 Webseite
Wenn man eine Webseite auf einem Desktop Rechner aufruft, erscheint bei vielen Seiten im Browser eine kleine Grafik im Tab, mit der diese Webseite grafisch dargestellt wird: Das Favorite Icon, kurz Favicon genannt. Der Name rührt daher, dass dieses Symbol beim Speichern einer Webseite in den Favoriten des Browsers erschienen ist. Mit dem Aufkommen mobiler Endgeräte und neuer Betriebssysteme hat sich die Anzahl und Formate von Grafiken, die man als Webentwickler einbinden und als Besuchender nutzen kann, vervielfacht. Zudem gibt es bei Google die Möglichkeit, eine Webseite auf die Optimierung als Progressive Web App (PWA) überprüfen zu lassen. Wie man diese Anforderungen mit TYPO3 umsetzt, beschreibe ich in diesem Artikel zu Code Snippets.
Favorite Icons und weitere Grafiken für Smartphones
Favorite Icons werden heute nicht nur im Browser für die Favoritenlisten genutzt. Weitere Anwendungen der Grafiken sind die Speichermöglichkeiten auf einem Smartphone und das Anzeigen von Inhalten während des Ladevorgangs einer Webseite. Hinzu kommt, dass man zwischen dem guten alten Favicon mit 16x16 Pixeln mittlerweile eine ganze Bandbreite von Größen bis hin zu 512x512 Pixeln und mehreren Grafikformaten hat.
Wenn man nun ein Bild identifiziert hat, das man als grundlegende Grafik für die gesamte Webseite einbinden möchte, kann man dieses Bild auf quadratisches Format in den Abmessungen 512x512 Pixel zuschneiden. Dieses Bild dient dann als Grundlage, um mit Hilfe eines Dienstes im Internet die notwendigen Grafiken zu erzeugen.
Sie bekommen alle automatisch erzeugten Datei als ZIP-Datei zum Download.
Manifest.json bearbeiten
Wenn man die ZIP-Datei extrahiert hat, sieht man neben den Bildern noch zwei weitere Dateien, die es nun zu bearbeiten gilt:
- manifest.json
- site.webmanifest
Wir beschäftigen uns in diesem Artikel in erster Linie mit der manifest.json als Datei zur Konfiguration der PWA. Die Inhalte der site.webmanifest sind entsprechend übertragbar. Hier ein Beispiel für eine rudimentäre Manifest Datei:
{
"name": "Ihre einzigartige TYPO3 Webseite",
"short_name": "TYPO3webseite",
"description": "Alles zum Redaktionssystem TYPO3",
"icons": [
{
"src": "\/icon\/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
},
{
"src": "\/icon\/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image\/png",
"purpose": "maskable"
}
],
"theme_color": "#123456",
"background_color": "#123456",
"display": "standalone"
}
Wichtige Informationen in dieser Datei sind
- name (Name Ihrer Webseite)
- short_name (kurzer Name Ihrer Webseite)
- theme_color: Farbe des Browsers beim Aufruf Ihrer Webseite
- background_color: Hintergrundfarbe des Browsers
- display: legt fest, für welche Art von Anwendung die PWA gedacht ist
Dieses Grundgerüst können Sie noch mit weiteren Angaben erweitern. Dazu gehören Bilder für die Anzeige auf unterschiedlichen Endgeräten bei Laden, Links für den Einstieg in die Seite und eine Beschreibung. Mehr dazu erfahren im Netzwerk für Google Entwickler, die Links dazu finden Sie am Ende dieses Artikels.
Bilder in Ihre TYPO3 Webseite einbinden
Die oben beschriebenen Bilder können Sie an jeder beliebigen Stellen Ihrer Webseite ablegen. Bei unseren eigenen Projekten haben wir ein Verzeichnis außerhalb des fileadmin gewählt, da diese Angaben unabhängig von der Funktion der TYPO3 Webseite sind, hier „/icon/“ als Unterverzeichnis.
Manifest.json in TypoScript einbinden
Nicht unabhängig von TYPO3 hingegen ist die Bereitstellung von Informationen für den Browser, wo er denn diese Informationen findet. Die Datei manifest.json sollte im Stammverzeichnis der Webseite liegen und kann über TypoScript in Ihr TYPO3 Projekt eingebunden werden:
page {
headerData {
100 = TEXT
100.wrap = <link rel="manifest" href="/manifest.json">
}
}
Sie können dem Browser jedoch noch eine Reihe weiterer Informationen mitgeben, so dass dieser ohne das Laden der manifest.json bereits weiß, wo er die Bilder für seine Darstellung findet:
page {
headerData {
100 = TEXT
100.wrap (
<link rel="apple-touch-icon" sizes="57x57" href="/icon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/icon/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icon/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#123456">
<meta name="msapplication-TileImage" content="/icon/ms-icon-144x144.png">
<meta name="theme-color" content="#123456">
)
}
}