Webapps nativer erscheinen lassen

Es ist nichts neues, aber durchaus nicht uninteressant. Apple gab den Entwicklern schon früh Möglichkeiten, die Webapps nativer erscheinen zu lassen. Titel und Icons zeigen auch Wirkung unter Android. 

Wenn sich jemand eine Website auf den Homescreen legt (quasi also einen Bookmark oder eine Verknüpfung mit der Website ablegt) wird ein Name vergeben, diesen kann der User zwar editieren, aber beim Anlegen wird das Eingabefeld erstmal vorbelegt – diesen kann man selbst vorgeben, durch das title-Tag der Seite.

<title>WebDev-Lab</title>

Bei diesem Anlegen auf dem Homescreen wird auch ein Icon angezeigt, das man vorgeben kann.

<link rel="apple-touch-icon" href="/images/touch-icon-iphone.png" />
<link rel="apple-touch-icon" href="/images/touch-icon-iphone4.png" sizes="114x114" />
<link rel="apple-touch-icon" href="/images/touch-icon-ipad.png" sizes="72x72" />

Für das jeweilige Ausgabegerät gibt es unterschiedlich große Icons. Der Schein des typischen Homescreen-Icons wird automatisch erzeugt, ebenso die abgerundeten Ecken. Möchte man sein Icon genauso angezeigt bekommen, wie man es hinterlegt hat, muss man ein leicht anderen Wert beim rel-Attribut angeben, nämlich:

rel="apple-touch-icon-precomposed"

Ruft man die auf dem Homescreen abgelegte Seite auf, kann es eventuell kurz dauern, bis sie geladen ist und angezeigt wird. Für diesen Zeitraum kann man dem Browser Splash-Screens vorgeben, die währenddessen quasi als Pausenfüller angezeigt werden. Auch hier gibt es wieder unterschiedliche Varianten für die verschiedenen Geräteklassen.

<link rel="apple-touch-startup-image" href="/images/splash-screen-1024x748.png" sizes="1024x748" />
<link rel="apple-touch-startup-image" href="/images/splash-screen-768x1004.png" sizes="768x1004" />
<link rel="apple-touch-startup-image" href="/images/splash-screen-640x960.png" sizes="640x960" />
<link rel="apple-touch-startup-image" href="/images/splash-screen-320x460.png" />

Um die normalen UI-Elemente des Safari zu verbergen, setzt man folgendes Meta-Tag:

<meta name="apple-mobile-web-app-capable" content="yes" />

Übrig bleibt nun noch die Status-Zeile am oberen Bildschirmrand, doch auch diese kann man noch bearbeiten. Als Optionen stehen default, black und black-translucent zur Auswahl. Letztere sorgt dafür, dass die Status-Zeile leicht transparent wirkt und der Webapp der gesamte Screen zur Verfügung steht. Inhalte scrollen dann unter die Status-Zeile.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Ganz allgemein kann man mit einem Meta-Tag auch noch Einstellungen zum Viewport definieren.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

Definiert werden können im content-Attribut width, height, initial-scale, minimum-scale, maximum-scale und user-scalable. Für Breite und Höhe kann man fixe Pixelangaben machen oder die relativ zum Anzeigegerät stehenden Werte device-width und device-height vergeben.

Veröffentlicht von

Hilko

2006 machte ich mein Hobby zum Beruf, startete mit einer Ausbildung zum Mediengestalter und arbeite inzwischen in Hannover als Frontend Web-Developer. Neben der Leidenschaft für semantisches Markup und den Möglichkeiten der aktuellen Frontend-Techniken, interessiere ich mich für das Reisen, fremde Kulturen und die Kunst der Fotografie.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.