![Techgedöns [tɛçgədøːns]](https://tchgdns.de/wp-content/themes/tchgdns/images/header.png "Techgedöns [tɛçgədøːns]")
Marcel
Chrome für Android wird mit einer der kommenden, finalen Version ein neues Feature bieten: Splash Screens für Webseiten. Öffnet man also eine auf dem Homescreen abgelegte Webseite, so wird man erst einmal von einem Splash Screen begrüßt, während die Webseite im Hintergrund lädt. Werden sicherlich nur die wenigsten Nutzer zu Gesicht bekommen (oder werden viele Webseiten auf den Homescreen gelegt?), dennoch eine recht interessante Sache. Damit das ganze aber funktioniert, müssen Webentwickler etwas Hand anlegen und ihre Webseite entsprechend anpassen. Ist aber in recht wenigen Schritten und mit vergleichsweise geringem Aufwand erledigt.
Grüße Hürde stellen sicherlich die verwendeten Icons dar, denn immerhin soll die Grafik groß genug sein, damit sie auf hochauflösenden Displays scharf dargestellt wird – gleichzeitig muss sie aber auch klein genug sein, auch auf kleineren Displays korrekt angezeigt zu werden. Google empfiehlt hierzu fünf verschiedene Größen bei unterschiedlichen Auflösungen – einfach beim größten beginnen und dann eben herunter skalieren:
- 128dp at 1x (160dpi) = 128px
- 128dp at 1.5x (240dpi) = 196px
- 128dp at 2x (320dpi) = 256px
- 128dp at 3x (480dpi) = 384px (Equivalent to Nexus 5)
- 128dp at 4x (640dpi) = 512px (Nexus 6 is in between 3 and 4)
Habt ihr alle eure Grafiken erstellt und im PNG-Format abgespeichert (zwecks transparentem Hintergrund), dann kann es auch schon losgehen. Zuerst einmal müsst ihr eine Datei mit dem Namen „manifest.json“ (oder einem anderen Namen) erstellen und diese auf euren Webserver hochladen. Damit diese genutzt werden kann, müsst ihr in den <head>-Bereich eurer Webseite beziehungsweise eures Themes die folgende Zeilen hinzufügen und den Pfad entsprechend anpassen:
<link rel="manifest" href="manifest.jon" />
Nutzt ihr WordPress und habt das JSON-Manifest in eurem Hauptordner eures Themes gelegt, könnt ihr auch direkt die folgende Zeile nutzen:
<link rel="manifest" href="<?php bloginfo('template_url'); ?>/manifest.json" />
Ist auch das erledigt, müssen wir das Manifest natürlich auch noch mit Inhalten füllen. Dazu können wir das folgende Beispiel-Manifest von Google nutzen – einfach per Copy & Paste in eure Datei einfügen, bearbeiten, hochladen.
{
"short_name": "Voice Memos",
"name": "Voice Memos",
"start_url": "./?utm_source=web_app_manifest",
"icons": [
{
"src": "/images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/images/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/images/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
],
"background_color": "#FAFAFA",
"theme_color": "#512DA8",
"display": "standalone",
"orientation": "portrait"
}
Ich denke mal, die weiteren Angaben dürften nicht sonderlich erklärungsbedürftig sein. Unter (Short) Name fügt ihr euren gewünschten Seitennamen ein, ebenso könnt ihr auch noch die Hintergrundfarbe und die Thema-Farbe der Statusleiste festlegen – gleiches gilt auch für die Ausrichtung, wobei die meisten Web-Apps sicherlich im Portrait-Modus genutzt werden dürften. Den Wert Start-URL könnt ihr auch leer lassen, so aber erhaltet ihr über ein Analyse-Tool eine Auflistung, wie häufig eure Seite als Web-App genutzt wurde. Solltet ihr noch mehr Icon-Größen nutzen wollen, könnt ihr diese einfach anhängen – ebenso solltet ihr natürlich die Pfade und Dateinamen eurer Icons anpassen, sonst passiert nichts.
Habt ihr nun alles gespeichert, hochgeladen und korrekt implementiert, sollte eure Webseite beim Starten vom Homescreen aus nun mit einem kleinen, aber feinen Splash Screen daherkommen.
Schreibe den ersten Kommentar