Android: Webseiten und Web-Apps mit einem Splash Screen versehen

Am 28.10.2015 veröffentlicht Lesezeit etwa 2:40 Minuten

chrome-android-splash-screen-webseiten

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 Hinter­grund lädt. Werden sicherlich nur die wenigsten Nutzer zu Gesicht bekommen (oder werden viele Webseiten auf den Homescreen gelegt?), dennoch eine recht inter­es­sante Sache. Damit das ganze aber funktio­niert, müssen Webent­wickler etwas Hand anlegen und ihre Webseite entspre­chend anpassen. Ist aber in recht wenigen Schritten und mit vergleichs­weise geringem Aufwand erledigt. 

Grüße Hürde stellen sicherlich die verwen­deten Icons dar, denn immerhin soll die Grafik groß genug sein, damit sie auf hochauf­lö­senden Displays scharf darge­stellt wird – gleich­zeitig muss sie aber auch klein genug sein, auch auf kleineren Displays korrekt angezeigt zu werden. Google empfiehlt hierzu fünf verschiedene Größen bei unter­schied­lichen 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 abgespei­chert (zwecks trans­pa­rentem Hinter­grund), 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 bezie­hungs­weise eures Themes die folgende Zeilen hinzu­fügen und den Pfad entspre­chend anpassen: 

<link rel="manifest" href="manifest.jon" />

Nutzt ihr WordPress und habt das JSON-Manifest in eurem Haupt­ordner 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ä­rungs­be­dürftig sein. Unter (Short) Name fügt ihr euren gewünschten Seiten­namen ein, ebenso könnt ihr auch noch die Hinter­grund­farbe und die Thema-Farbe der Status­leiste 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 Datei­namen eurer Icons anpassen, sonst passiert nichts.

Habt ihr nun alles gespei­chert, hochge­laden und korrekt imple­men­tiert, sollte eure Webseite beim Starten vom Homescreen aus nun mit einem kleinen, aber feinen Splash Screen daher­kommen.